JP-ChargeTeam51/components/double-slider/DoubleSlider.vue

<template>
	<view class="double-slider" :style="{
		width: `calc(${sliderWidth} - ${blockSize})`,
		height: sliderHeight,//`calc(${sliderHeight}+3*${borderRadius})`,
		background: `${indicatorColor}`,
		borderRadius: `${radius}`,
		margin: `calc(${blockSize} / 2) 0`,
	}">
		<view class="active-slider" :style="{
			width: `${xWidth - activeX}px`,
			height: sliderHeight,//`calc(${sliderHeight}+3*${borderRadius})`,
			background: `${disabled || (leftBlockDisabled && rightBlockDisabled)? disabledIndicatorColor:activeColor}`,
			transform: `translateX(${activeX}px)`,
			left: `calc(${blockSize} / 2)`
		}">
			<view class="block1" :style="[getLeftBlockStyle]"  @touchstart="blockStart1"
				@touchmove.stop.parevent="blockMove1">
				<label style="position: relative;line-height:28px; " :style="[getLableStyle]">{{currentMinValue}}</label>
			</view>
			<view class="block2"  :style="[getRightBlockStyle]" @touchstart="blockStart2"
				@touchmove.stop.parevent="blockMove2" @touchend="isLeft = false">
				<view style="position: relative;line-height:28px;" :style="[getLableStyle]" >
					<label >{{currentMaxValue}}</label>									
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		props: { 
			labelColor:{
				type:String,
				default:'#000000'
			},
			sliderExtendHeight:{
				type:String,
				default:'30rpx'
			},
			sliderWidth: {
				type: String,
				default: "100%"
			},
			sliderHeight: {
				type: String,
				default: "15rpx"
			},
			indicatorColor: {
				type: String,
				default: "#FF0000"//"#EFEFEF"
			},
			activeColor: {
				type: String,
				default: "skyblue"
			},
			borderStyle:{
				type: String,
				default: "solid"
			},
			borderColor:{
				type:String,
				default: "#00B962"
			},
			borderWidth:{
				type:String,
				default:'1rpx'
			},
			borderRadius:{
				type: String,
				default:'20rpx'
			},
//			style="border-radius: 25rpx;border-style:solid ; border-color: blue;border-width: 1rpx; "
			radius: {
				type: String,
				default: "20rpx"
			},
			blockSize: {
				type: String,
				default: "36rpx"
			},
			blockColor: {
				type: String,
				default: "#3489F8"
			},
			/*
			currentValue: {
				type: Array,
				default: [20, 80]
			},*/
			currentMinValue:{
				type:Number,
				default:0
			},
			currentMaxValue:{
				type:Number,
				defult:100
			},
			minValue: {
				type: Number,
				default: 0
			},
			maxValue: {
				type: Number,
				default: 100
			},
			step: {
				type: Number,
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false
			},
			leftBlockDisabled: {
				type: Boolean,
				default: false
			},
			rightBlockDisabled: {
				type: Boolean,
				default: false
			},
			disabledIndicatorColor: {
				type: String,
				default: "#bababa"
			},
			disabledBlockColor: {
				type: String,
				default: "#8b8b8b"
			},
			blockStyle: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		mounted() {
			console.log('mounted')
			const query = uni.createSelectorQuery().in(this);
			query.select('.double-slider').boundingClientRect(res => {
				this.width = res.width;

				const cMinP = this.currentMinValue/ this.maxValue * 100;
				const cMaxP = this.currentMaxValue / this.maxValue * 100;

				this.activeX = this.width * (cMinP * 0.01);
				this.xWidth = this.width * (cMaxP * 0.01);
				
				//this.currentMaxValue = this.currentValue[1];
				//this.currentMinValue = this.currentValue[0];
				//console.log('value '+this.currentMaxValue)
				this.minStepValue = this.currentMinValue;
				this.maxStepValue = this.maxValue * (cMaxP * 0.01);
				console.log('mounted 1')
			}).exec();

			query.select('.block1').boundingClientRect(res => {
				this.blockWidth = res.width;
				console.log('mounted2 ' + this.blockWidth)
			}).exec();

		},
		data() {
			return {
				width: 0,
				xWidth: 0,
				activeX: 0,
				blockWidth: 0, // 块宽度
				blockX1: 0,
				blockX2: 0,
				overlap: false,
				isLeft: false,
				minStepValue: 0,
				maxStepValue: 0
			}
		},
		computed: {
/*			currentMinValue(){
				return currentValue[0];
			},
			currentMaxValue(){
				return currentValue[1];
			},*/
			stepValueW() {
				const stepP = this.step / this.maxValue * 100;
				return this.width * stepP * 0.01;
			},
			getBlockStyle() {
				this.blockStyle = {
					width: this.blockSize,
					height: this.blockSize,
					...this.blockStyle,
				}
				return this.blockStyle;
			},
			getLableStyle(){
				const styleObj = Object.assign({}, this.getBlockStyle);
				if(this.borderRadius)
				{
					styleObj.top =  this.borderRadius;
				}
				if(this.labelColor){
					styleObj.color = this.labelColor;
				}
				
				return styleObj;
			},
			getLeftBlockStyle() {
				const styleObj = Object.assign({}, this.getBlockStyle);
				styleObj.background = styleObj.backgroundImage || styleObj.background ? styleObj.background :
					`${this.disabled || this.leftBlockDisabled ? this.disabledBlockColor : this.blockColor}`;
				if(this.borderStyle)
					styleObj.borderStyle = this.borderStyle;
				if(this.blockColor)
					styleObj.borderColor = this.borderColor;
				if(this.borderWidth)
					styleObj.borderWidth = this.borderWidth;
				if(this.borderRadius)
					styleObj.borderRadius = this.borderRadius;
				 
				return styleObj;
			},
			getRightBlockStyle() {
				const styleObj = Object.assign({}, this.getBlockStyle);
				styleObj.background = styleObj.backgroundImage || styleObj.background ? styleObj.background :
					`${this.disabled || this.rightBlockDisabled ? this.disabledBlockColor : this.blockColor}`;
			if(this.borderStyle)
				styleObj.borderStyle = this.borderStyle;
			if(this.blockColor)
				styleObj.borderColor = this.borderColor;
			if(this.borderWidth)
				styleObj.borderWidth = this.borderWidth;
			if(this.borderRadius)
				styleObj.borderRadius = this.borderRadius;
			 
				return styleObj;
			}

		},
		methods: {
			reset(e){
				console.log('e'+JSON.stringify(e))
				this.activeX = this.width * (e.minP * 0.01);
				this.xWidth = this.width * (e.maxP * 0.01);
				 
				this.value[0] = e.minValue;
				this.value[1] = e.maxValue;
			},
			// 记录一个块位置
			blockStart1(e) {
				if (this.disabled || this.leftBlockDisabled) {
					return;
				}
				this.blockX1 = e.touches[0].clientX;
			},
			// 记录第二个块位置
			blockStart2(e) {
				this.blockX2 = e.touches[0].clientX;
				if (Math.round(this.activeX) == Math.round(this.xWidth)) {
					this.overlap = true;
				} else {
					this.overlap = false;
				}
			},
			// 第一个块移动
			blockMove1(e) {
				if (this.disabled || this.leftBlockDisabled) {
					return;
				}
				let x = (this.blockX1 + (e.touches[0].clientX - this.blockX1)) - this.blockWidth;
				// 如果设置了步长
				if (this.step > 0) {
					// 移动的数值
					let cValue = this.maxValue * (x / this.width * 100 * 0.01);

					if (cValue >= this.minStepValue + this.step && Math.round(this.activeX) < Math.round(this.xWidth)) {
						this.minStepValue += this.step;
						this.activeX += this.stepValueW;
						this.sendEmit();
					} else if (cValue <= this.minStepValue - this.step && Math.round(this.activeX) > 0) {
						this.minStepValue -= this.step;
						this.activeX -= this.stepValueW;
						this.sendEmit();
					}
					return;
				}

				// 如果本次移动的x值超过最大的值或小于最小值
				if (x > this.xWidth) {
					x = this.xWidth;
				} else if (x <= 0) {
					x = 0;
				}
				this.activeX = x;
				this.sendEmit();
			},
			// 第二个块移动
			blockMove2(e) {
				const activeX = this.activeX;
				let x = (this.blockX2 + (e.touches[0].clientX - this.blockX2)) - this.blockWidth;
				// 如果是重叠, 并且只对左边生效
				if (this.overlap && (x - this.step) <= this.xWidth) {
					if (this.disabled || this.leftBlockDisabled) {
						return;
					}
					this.isLeft = true;
					let cValue = this.maxValue * (x / this.width * 100 * 0.01);
					// 如果有步长
					if (this.step > 0) {
						if (cValue >= this.minStepValue + this.step && Math.round(this.activeX) < Math.round(this
							.xWidth)) {
							this.minStepValue += this.step;
							this.activeX += this.stepValueW;
							this.sendEmit();
						} else if (cValue <= this.minStepValue - this.step && Math.round(this.activeX) > 0) {
							this.minStepValue -= this.step;
							this.activeX -= this.stepValueW;
							this.sendEmit();
						}
						return;
					}
					// 移动超出设置
					if (x <= 0) {
						x = 0;
					} else if (x >= this.xWidth) { // 如果移动的值大于最大值
						x = this.xWidth;
					}
					this.activeX = x;
					this.sendEmit();
				} else {
					if (this.disabled || this.rightBlockDisabled) {
						return;
					}
					// 重叠之后，第一次拖动是往左边的话将无法超出右边
					if (this.isLeft) {
						this.activeX = this.xWidth;
						this.sendEmit();
						return;
					}

					// 不重叠正常设置
					this.overlap = false;
					// 如果设置步长
					if (this.step > 0) {
						// 移动的数值
						let cValue = this.maxValue * (x / this.width * 100 * 0.01);
						// 判断移动方向
						if (cValue >= this.maxStepValue + this.step && Math.round(this.xWidth) < Math.round(this.width)) {
							this.maxStepValue += this.step;
							this.xWidth += this.stepValueW;
							this.sendEmit();
						} else if (cValue <= this.maxStepValue - this.step && Math.round(this.xWidth) > Math.round(this
								.activeX)) {
							this.maxStepValue -= this.step;
							this.xWidth -= this.stepValueW;
							this.sendEmit();
						}

						return;
					}

					// 移动超出设置
					if (x <= this.activeX) {
						x = this.activeX;
					} else if (x >= this.width) { // 如果移动的值大于最大值
						x = this.width;
					}
					// 正常设置
					this.xWidth = x;
				}
				this.sendEmit();
			},
			calc_position(){
				
			},
			sendEmit() {
				// 最小百分比
				let minP = Math.floor(this.activeX / this.width * 100);
				// 最小值
				let minValue = Math.floor((this.maxValue * (minP * 0.01)) * 100) / 100;

				// 最大百分比
				let maxP = Math.floor(this.xWidth / this.width * 100);
				// 最大值
				let maxValue = Math.floor((this.maxValue * (maxP * 0.01)) * 100) / 100;

				this.currentMinValue = minValue;
				this.currentMaxValue = maxValue;
				//console.log('min value'+this.currentMinValue)
				//console.log('max value'+this.currentMaxValue)
								
				// console.log("最小百分比",minP);
				// console.log("最小值",minValue);

				// console.log("最大百分比",maxP);
				// console.log("最大值",maxValue);

				this.$emit("change", {
					minValue,
					maxValue,
					minP,
					maxP
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.double-slider {
		margin: 0 auto;

		.active-slider {
			position: relative;

			.block1,
			.block2 {
				border-radius: 50%;
				position: absolute;
				top: 50%;
				transition: all 0.05s;
			}

			.block1 {
				left: 0;
				transform: translate(-50%, -50%);
			}

			.block2 {
				right: 0;
				transform: translate(50%, -50%);
				z-index: 1;
			}
		}
	}
</style>