FirstUI-vue/components/firstui/fui-slider/mpjs.js

// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18   61  4  0 72 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
// #ifndef APP-PLUS || MP-WEIXIN || H5

export default {
	watch: {
		value(val) {
			this.initData(val)
		},
		endValue(val) {
			if (this.section) {
				this.initEndData(val)
			}
		}
	},
	data() {
		return {
			drag: false,
			startX: 0,
			endX: 0,
			lastLeft: 0,
			onceLeft: 0,
			lastRight: 0,
			onceRight: 0,
			moveLeft: 'translate3d(0,0,0)',
			transLeft: 'translate3d(-100%, 0, 0)',
			moveRight: 'translate3d(0,0,0)',
			transRight: 'translate3d(100%, 0, 0)',
			isRight: false
		}
	},
	mounted() {
		this.$nextTick(()=>{
			this.initData(this.value)
			if (this.section) {
				this.initEndData(this.endValue)
			}
		})
	},
	methods: {
		initData(value) {
			this.startX = 0;
			this.lastLeft = 0;
			this.styleChange(Number(value), true)
		},
		initEndData(value) {
			this.endX = 0;
			this.lastRight = 0;
			value = Number(this.max) - Number(value) + Number(this.min)
			this.styleSectionChange(value, true)
		},
		format(value) {
			value = Number(value)
			let step = Number(this.step)
			return Math.round(Math.max(Number(this.min), Math.min(value, Number(this.max))) / step) * step;
		},
		touchstart(e) {
			let touch = e.touches[0] || e.changedTouches[0];
			this.startX = touch.clientX
		},
		endTouchstart(e) {
			let touch = e.touches[0] || e.changedTouches[0];
			this.endX = touch.clientX
		},
		changeValue(value, isStart, isEnd) {
			var params = {
				value: value,
				isStart: isStart
			}
			if (isEnd) {
				this.change(params)
			} else {
				this.changing(params)
			}
		},
		styleChange(value, isEnd) {
			value = this.format(value);
			if (this.section) {
				value = value > this.end ? this.end : value;
			}
			this.changeValue(value, true, isEnd)
			const min = Number(this.min)
			const max = Number(this.max)
			var dvalue = max - min;
			var maxWidth = Number(this.width) - Number(this.blockWidth);
			var width = (value - min) / dvalue * maxWidth;
			this.lastLeft = width
			if (isEnd) {
				this.onceLeft = width
			}
			this.transLeft = `translate3d(-${Number(this.width)-width}px,0,0)`
			this.moveLeft = `translate3d(${width}px,0,0)`
			this.isRight = value === max
		},
		styleSectionChange(value, isEnd) {
			value = this.format(value);
			const min = Number(this.min)
			const max = Number(this.max)
			var total = max + min;
			var val = total - value;
			val = val < this.start ? this.start : val;
			value = total - val;
			this.changeValue(val, false, isEnd)
			var dvalue = max - min;
			var maxWidth = Number(this.width) - Number(this.blockWidth);
			var width = (value - min) / dvalue * maxWidth;
			this.lastRight = width
			if (isEnd) {
				this.onceRight = width
			}
			this.transRight = `translate3d(${Number(this.width)-width}px,0,0)`
			this.moveRight = `translate3d(-${width}px,0,0)`
		},
		touchmove(e) {
			if (this.disabled) return;
			let touch = e.touches[0] || e.changedTouches[0];
			let pageX = touch.clientX;
			this.drag = true
			let left = pageX - this.startX + (this.onceLeft || 0);
			left = left < 0 ? 0 : left;
			let maxWidth = Number(this.width) - Number(this.blockWidth);
			left = left >= maxWidth ? maxWidth : left;
			let dvalue = Number(this.max) - Number(this.min);
			let value = (left / maxWidth) * dvalue + Number(this.min);
			// this.startX = pageX
			this.lastLeft = left
			this.styleChange(value, false)
		},
		endTouchmove(e) {
			if (this.disabled) return;
			let touch = e.touches[0] || e.changedTouches[0];
			let pageX = touch.clientX;
			this.drag = true
			let left = this.endX - pageX + (this.onceRight || 0);
			left = left < 0 ? 0 : left;
			let maxWidth = Number(this.width) - Number(this.blockWidth);
			left = left >= maxWidth ? maxWidth : left;
			let dvalue = Number(this.max) - Number(this.min);
			let value = (left / maxWidth) * dvalue + Number(this.min);
			// this.endX = pageX
			this.lastRight = left
			this.styleSectionChange(value, false)
		},
		touchend(e) {
			if (this.disabled) return;
			if (this.drag) {
				let maxWidth = Number(this.width) - Number(this.blockWidth);
				let dvalue = Number(this.max) - Number(this.min);
				let value = (this.lastLeft / maxWidth) * dvalue + Number(this.min);
				this.styleChange(value, true)
				this.drag = false
			}
		},
		endTouchend(e) {
			if (this.disabled) return;
			if (this.drag) {
				let maxWidth = Number(this.width) - Number(this.blockWidth);
				let dvalue = Number(this.max) - Number(this.min);
				let value = (this.lastRight / maxWidth) * dvalue + Number(this.min);
				this.styleSectionChange(value, true)
				this.drag = false
			}
		}
	}
}

// #endif

// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif