392 lines
9.5 KiB
Vue
392 lines
9.5 KiB
Vue
|
<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>
|