|
|
@@ -1,391 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="range-slider" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
|
|
|
- <view class="range-bar" :style="'width:100%;height:' + barHeight + 'rpx'">
|
|
|
- <view class="range-bar-bg" :style="'background-color:' + backgroundColor + ''"></view>
|
|
|
- <view class="range-bar-progress" :style="'margin-left:' + progressBarLeft + 'rpx;width:' + progressBarWidth + 'rpx;background-color:' + activeColor + ''"></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view
|
|
|
- class="block"
|
|
|
- :class="{ active: isMinActive }"
|
|
|
- :style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + minBlockLeft + 'rpx;'"
|
|
|
- @touchstart="_onBlockTouchStart"
|
|
|
- @touchmove.stop="_onBlockTouchMove"
|
|
|
- @touchend="_onBlockTouchEnd"
|
|
|
- :data-left="minBlockLeft"
|
|
|
- data-tag="minBlock"
|
|
|
- >
|
|
|
- <slot name="minBlock"></slot>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="block"
|
|
|
- :class="{ active: isMaxActive }"
|
|
|
- :style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + maxBlockLeft + 'rpx;'"
|
|
|
- @touchstart="_onBlockTouchStart"
|
|
|
- @touchmove.stop="_onBlockTouchMove"
|
|
|
- @touchend="_onBlockTouchEnd"
|
|
|
- :data-left="maxBlockLeft"
|
|
|
- data-tag="maxBlock"
|
|
|
- >
|
|
|
- <slot name="maxBlock"></slot>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-/**
|
|
|
- * range-slider v1.0.6
|
|
|
- */
|
|
|
-const _windowWidth = uni.getSystemInfoSync().windowWidth;
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isMinActive: false,
|
|
|
- isMaxActive: false,
|
|
|
-
|
|
|
- //#ifdef H5
|
|
|
- MAX_LENGTH: 294,
|
|
|
- maxBlockLeft: 300,
|
|
|
- //#endif
|
|
|
-
|
|
|
- // #ifndef H5
|
|
|
- MAX_LENGTH: 700,
|
|
|
- maxBlockLeft: 350,
|
|
|
- // #endif
|
|
|
-
|
|
|
- minBlockLeft: 0,
|
|
|
- progressBarLeft: 0,
|
|
|
- progressBarWidth: 350,
|
|
|
-
|
|
|
- originalMinValue: 0,
|
|
|
- originalMaxValue: 0
|
|
|
- };
|
|
|
- },
|
|
|
- components: {},
|
|
|
- props: {
|
|
|
- //组件宽度
|
|
|
- width: {
|
|
|
- type: Number,
|
|
|
- default: 750
|
|
|
- },
|
|
|
- //组件高度
|
|
|
- height: {
|
|
|
- type: Number,
|
|
|
- default: 100
|
|
|
- },
|
|
|
- //滑块大小
|
|
|
- blockSize: {
|
|
|
- type: Number,
|
|
|
- default: 50
|
|
|
- },
|
|
|
- //区间进度条高度
|
|
|
- barHeight: {
|
|
|
- type: Number,
|
|
|
- default: 5
|
|
|
- },
|
|
|
- //背景条颜色
|
|
|
- backgroundColor: {
|
|
|
- type: String,
|
|
|
- default: '#e9e9e9'
|
|
|
- },
|
|
|
- //已选择的颜色
|
|
|
- activeColor: {
|
|
|
- type: String,
|
|
|
- default: '#1aad19'
|
|
|
- },
|
|
|
- //最小值
|
|
|
- min: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- },
|
|
|
- //最大值
|
|
|
- max: {
|
|
|
- type: Number,
|
|
|
- default: 100
|
|
|
- },
|
|
|
- //设置初始值
|
|
|
- values: {
|
|
|
- type: Array,
|
|
|
- default: function() {
|
|
|
- return [0, 100];
|
|
|
- }
|
|
|
- },
|
|
|
- //步长值
|
|
|
- step: {
|
|
|
- type: Number,
|
|
|
- default: 1
|
|
|
- },
|
|
|
- //live模式，是否动态更新
|
|
|
- liveMode: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- created: function() {
|
|
|
- //使用自定义组件编译模式时，支持生命周期为：created
|
|
|
- this._refresh();
|
|
|
- },
|
|
|
- onLoad: function(option) {
|
|
|
- //不使用自定义组件编译模式时，支持生命周期为：onload
|
|
|
- this._refresh();
|
|
|
- },
|
|
|
- onUnload: function() {},
|
|
|
- watch: {
|
|
|
- //组件宽度
|
|
|
- width: function(newVal, oldVal, changedPath) {
|
|
|
- var that = this;
|
|
|
- if (newVal != that.width) {
|
|
|
- this._refresh();
|
|
|
- }
|
|
|
- },
|
|
|
- //滑块大小
|
|
|
- blockSize: function(newVal, oldVal, changedPath) {
|
|
|
- var that = this;
|
|
|
- if (newVal != that.blockSize) {
|
|
|
- this._refresh();
|
|
|
- }
|
|
|
- },
|
|
|
- //最小值
|
|
|
- min: function(newVal, oldVal, changedPath) {
|
|
|
- var that = this;
|
|
|
- if (newVal != that.min) {
|
|
|
- that._refresh();
|
|
|
- }
|
|
|
- },
|
|
|
- //最大值
|
|
|
- max: function(newVal, oldVal, changedPath) {
|
|
|
- var that = this;
|
|
|
- if (newVal != that.max) {
|
|
|
- that._refresh();
|
|
|
- }
|
|
|
- },
|
|
|
- //设置初始值
|
|
|
- values: function(newVal, oldVal, changedPath) {
|
|
|
- var that = this;
|
|
|
- var values = that.values;
|
|
|
- console.log('refresh', newVal, oldVal);
|
|
|
- if (that._isValuesValid(newVal) && that._isValuesValid(values)) {
|
|
|
- if (values[0] != oldVal[0] || values[1] != oldVal[1]) that._refresh();
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //补0
|
|
|
- _pad: function(num, n) {
|
|
|
- return Array(n - ('' + num).length + 1).join(0) + num;
|
|
|
- },
|
|
|
- _pxToRpx: function(px) {
|
|
|
- return (750 * px) / _windowWidth;
|
|
|
- },
|
|
|
- _onBlockTouchStart: function(e) {
|
|
|
- let tag = e.target.dataset.tag;
|
|
|
- if (tag == 'minBlock' || tag == 'maxBlock') {
|
|
|
- this.isMinActive = tag == 'minBlock';
|
|
|
- this.isMaxActive = tag == 'maxBlock';
|
|
|
-
|
|
|
- //兼容h5平台及某版本微信
|
|
|
- if (e.hasOwnProperty('changedTouches')) {
|
|
|
- this._blockDownX = e.changedTouches[0].pageX;
|
|
|
- } else {
|
|
|
- this._blockDownX = e.pageX;
|
|
|
- }
|
|
|
-
|
|
|
- //#ifdef H5
|
|
|
- this._blockLeft = parseFloat(e.target.dataset.left);
|
|
|
- //#endif
|
|
|
- // #ifndef H5
|
|
|
- this._blockLeft = e.target.dataset.left;
|
|
|
- // #endif
|
|
|
-
|
|
|
- this._curBlock = e.target.dataset.tag;
|
|
|
- }
|
|
|
- },
|
|
|
- _onBlockTouchMove: function(e) {
|
|
|
- let tag = e.target.dataset.tag;
|
|
|
- if (tag == 'minBlock' || tag == 'maxBlock') {
|
|
|
- var that = this;
|
|
|
- var values = that._calculateValues(e);
|
|
|
- that._refreshProgressBar(values[2], values[3]);
|
|
|
- that._refreshBlock(values[2], values[3]);
|
|
|
- //拖动时也触发事件
|
|
|
- var eventDetail = {
|
|
|
- minValue: this.formatNumber(values[0], this.step),
|
|
|
- maxValue: this.formatNumber(values[1], this.step),
|
|
|
- fromUser: true,
|
|
|
- originalValue: {
|
|
|
- minValue: values[0],
|
|
|
- maxValue: values[1]
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- this.originalMinValue = values[0];
|
|
|
- this.originalMaxValue = values[1];
|
|
|
- var eventOption = {};
|
|
|
- //
|
|
|
- if (this.liveMode) that.$emit('rangechange', eventDetail, eventOption);
|
|
|
- }
|
|
|
- },
|
|
|
- _onBlockTouchEnd: function(e) {
|
|
|
- let tag = e.target.dataset.tag;
|
|
|
- this.isMinActive = false;
|
|
|
- this.isMaxActive = false;
|
|
|
- if (tag == 'minBlock' || tag == 'maxBlock') {
|
|
|
- var that = this;
|
|
|
- var values = that._calculateValues(e.mp.changedTouches[0]);
|
|
|
- that._refreshProgressBar(values[2], values[3]);
|
|
|
- that._refreshBlock(values[2], values[3]);
|
|
|
- var eventDetail = {
|
|
|
- minValue: this.formatNumber(values[0], this.step),
|
|
|
- maxValue: this.formatNumber(values[1], this.step),
|
|
|
- fromUser: true,
|
|
|
- originalValue: {
|
|
|
- minValue: values[0],
|
|
|
- maxValue: values[1]
|
|
|
- }
|
|
|
- };
|
|
|
- this.originalMinValue = values[0];
|
|
|
- this.originalMaxValue = values[1];
|
|
|
- var eventOption = {};
|
|
|
- that.$emit('rangechange', eventDetail, eventOption);
|
|
|
- }
|
|
|
- },
|
|
|
- _isValuesValid: function(values) {
|
|
|
- return values != null && values != undefined && values.length == 2;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 根据手势计算相关数据
|
|
|
- */
|
|
|
- _calculateValues: function(e) {
|
|
|
- var pageX = e.pageX;
|
|
|
- //兼容h5平台
|
|
|
- if (e.hasOwnProperty('changedTouches')) {
|
|
|
- pageX = e.changedTouches[0].pageX;
|
|
|
- }
|
|
|
-
|
|
|
- var that = this;
|
|
|
- var moveLength = pageX - that._blockDownX;
|
|
|
- var left = that._blockLeft + that._pxToRpx(moveLength);
|
|
|
- left = Math.max(0, left);
|
|
|
- left = Math.min(left, that.MAX_LENGTH);
|
|
|
- var minBlockLeft = that.minBlockLeft;
|
|
|
- var maxBlockLeft = that.maxBlockLeft;
|
|
|
- if (that._curBlock == 'minBlock') {
|
|
|
- minBlockLeft = left;
|
|
|
- } else {
|
|
|
- maxBlockLeft = left;
|
|
|
- }
|
|
|
- var range = that.max - that.min;
|
|
|
- var minLeft = Math.min(minBlockLeft, maxBlockLeft);
|
|
|
- var maxLeft = Math.max(minBlockLeft, maxBlockLeft);
|
|
|
- var minValue = (minLeft / that.MAX_LENGTH) * range + that.min;
|
|
|
- var maxValue = (maxLeft / that.MAX_LENGTH) * range + that.min;
|
|
|
- return [minValue, maxValue, minLeft, maxLeft];
|
|
|
- },
|
|
|
- /**
|
|
|
- * 计算滑块坐标
|
|
|
- */
|
|
|
- _calculateBlockLeft: function(minValue, maxValue) {
|
|
|
- var that = this;
|
|
|
- var blockSize = that.blockSize;
|
|
|
- var range = that.max - that.min;
|
|
|
- var minLeft = ((minValue - that.min) / range) * that.MAX_LENGTH;
|
|
|
- var maxLeft = ((maxValue - that.min) / range) * that.MAX_LENGTH;
|
|
|
- return [minLeft, maxLeft];
|
|
|
- },
|
|
|
- /**
|
|
|
- * 刷新进度条视图
|
|
|
- */
|
|
|
- _refreshProgressBar: function(minBlockLeft, maxBlockLeft) {
|
|
|
- var that = this;
|
|
|
- var blockSize = that.blockSize;
|
|
|
- that.progressBarLeft = minBlockLeft + blockSize / 2;
|
|
|
- that.progressBarWidth = Math.abs(maxBlockLeft - minBlockLeft);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 刷新滑块视图
|
|
|
- */
|
|
|
- _refreshBlock: function(minBlockLeft, maxBlockLeft) {
|
|
|
- var that = this;
|
|
|
- that.minBlockLeft = minBlockLeft;
|
|
|
- that.maxBlockLeft = maxBlockLeft;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 刷新整个视图
|
|
|
- */
|
|
|
- _refresh: function() {
|
|
|
- var that = this;
|
|
|
- var MAX_LENGTH = that.width - that.blockSize;
|
|
|
- that.MAX_LENGTH = MAX_LENGTH;
|
|
|
- that.maxBlockLeft = MAX_LENGTH;
|
|
|
- that.progressBarWidth = MAX_LENGTH;
|
|
|
- var values = that.values;
|
|
|
- if (this.originalMinValue && this.originalMinValue) {
|
|
|
- values = [this.originalMinValue || values[0], this.originalMaxValue || values[1]];
|
|
|
- }
|
|
|
-
|
|
|
- if (that._isValuesValid(values)) {
|
|
|
- values[0] = Math.max(that.min, values[0]);
|
|
|
- values[0] = Math.min(values[0], that.max);
|
|
|
- values[1] = Math.max(that.min, values[1]);
|
|
|
- values[1] = Math.min(values[1], that.max);
|
|
|
- var leftValues = that._calculateBlockLeft(values[0], values[1]);
|
|
|
- that._refreshProgressBar(leftValues[0], leftValues[1]);
|
|
|
- that._refreshBlock(leftValues[0], leftValues[1]);
|
|
|
- }
|
|
|
- },
|
|
|
- formatNumber(num, step) {
|
|
|
- //格式化数字，保留几位小数
|
|
|
- let stepStr = '' + step;
|
|
|
- let index = stepStr.indexOf('.');
|
|
|
- let len = index > -1 ? stepStr.length - index - 1 : 0;
|
|
|
- let offestNum = parseInt(1 + Array(('' + len).length + 1).join(0)) * 0.1;
|
|
|
- let tmpNum = num * offestNum;
|
|
|
- return ((parseInt(tmpNum / step + (step > 1 ? 1 : step) * 0.5) * step) / offestNum).toFixed(len);
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-.range-slider {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.range-bar {
|
|
|
- position: absolute;
|
|
|
-}
|
|
|
-
|
|
|
-.range-bar {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- border-radius: 10000rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.range-bar-bg {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 10000rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.range-bar-progress {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: blueviolet;
|
|
|
-}
|
|
|
-
|
|
|
-.block {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- background: #fff;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 0rpx 0rpx 6rpx #ccc;
|
|
|
-}
|
|
|
-
|
|
|
-.block.active {
|
|
|
- transform: translate(0, -50%) scale(1.5);
|
|
|
-}
|
|
|
-</style>
|
wkyy