ai.touchui-vue 1.31.3 → 1.32.0

package/packages/range/src/range.vue

@@ -1,612 +1,612 @@
-<template>
-	<span class="to-range to-form-readonly" :style="setStyle" @touchmove="moveHandle($event)" @touchend="endHandle($event)">
-		<span class="to-rangeMain">
-			<span class="to-rangeBar" @click.stop="rangeBarClick($event)">
-				<span class="to-rangeProgress" :style="{width:(rangeProgress - startProgress) + '%',left: startProgress + '%'}">
-					<span v-if="start" ref="touchStartBar" :style="{zIndex: String(startProgress) === '100'?'100':'99'}" class="to-rangeStart" @mousedown="onStartButtonDown" @touchstart="startHandle($event)"></span>
-					<span ref="touchBar" class="to-rangeEnd" @mousedown="onButtonDown" @touchstart="endStartHandle($event)"></span>
-				</span>
-			</span>
-			<span v-if="showInput" class="to-rangeValue">
-				<span v-if="start" :class="setClass" class="to-input">
-					<to-input ref="rangeStartInput" v-model="refStartVal" type="number" mode="none" v-bind="inputProps" :min="min" :max="max" :clearable="false" :width="6" :readonly="disabled || !inputable" @blur="inputStartHandle"></to-input>
-					<span class="to-inputText to-inputText-narrow">~</span>
-					<to-input ref="rangeEndInput" v-model="refEndVal" type="number" mode="none" v-bind="inputProps" :min="min" :max="max" :clearable="false" :width="6" :readonly="disabled || !inputable" @blur="inputEndHandle"></to-input>
-				</span>
-				<!--				<to-input ref="rangeInput" v-model="refVal" v-bind="inputProps" fillet="normal" :min="min" :max="max" :clearable="false" :width="6" :readonly="readonly" @blur="inputHandle"></to-input>-->
-				<to-input v-else ref="rangeInput" v-model="refVal" v-bind="inputProps" type="number" :min="min" :max="max" :clearable="false" :width="6" :readonly="disabled || !inputable" @blur="inputHandle"></to-input>
-			</span>
-		</span>
-	</span>
-</template>
-<script>
-export default {
-	name: 'ToRange',
-	componentName: 'ToRange',
-	model: {
-		event: 'change'
-	},
-	props: {
-		value: {
-			type: [Number, String],
-			default: 0
-		},
-		readonly: {
-			type: Boolean,
-			default: false
-		},
-		inputable: {
-			type: Boolean,
-			default: true
-		},
-		max: {
-			type: [Number, String],
-			default: 100
-		},
-		min: {
-			type: [Number, String],
-			default: 0
-		},
-		ruler: {
-			type: Boolean,
-			default: false
-		},
-		start: {
-			type: Boolean,
-			default: false
-		},
-		step: {
-			type: [String, Number],
-			default: 1
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		valueWidth: {
-			type: [Number, String],
-			default: 0
-		},
-		showInput: Boolean,
-		inputProps: {
-			type: Object,
-			default() {
-				return {}
-			}
-		}
-	},
-	data() {
-		return {
-			disabled: this.readonly,
-			length: 0,
-			isStart: false,
-			progress: 0,
-			sProgress: 0,
-			dragging: true,
-			startX: 0,
-			endStartX: 0,
-			startMoveX: 0,
-			startPosition: 0,
-			currentX: 0,
-			moveX: 0,
-			endX: 0,
-			x: 0,
-			sx: 0,
-			isStartMove: 'start',
-			rangeProgress: 0,
-			sStartMoveX: 0,
-			sStartPosition: 0,
-			startProgress: 0,
-			startValue: 0
-		}
-	},
-	computed: {
-		val: {
-			get: function() {
-				return Math.round(this.progress / this.range * this.range) || 0
-			},
-			set: function(newVal) {
-				this.progress = newVal
-				this.x = this.length * this.progress / this.range
-			}
-		},
-		startVal: {
-			get: function() {
-				return Math.round(this.sProgress / this.range * this.range) || 0
-			},
-			set: function(newVal) {
-				this.sProgress = newVal
-				this.sx = this.length * this.sProgress / this.range
-			}
-		},
-		refVal: {
-			get: function() {
-				if (this.start) {
-					return (this.startVal + this.min) + ',' + (this.val + this.min)
-				} else {
-					return this.val + this.min
-				}
-			},
-			set: function(newVal) {
-			}
-		},
-		refStartVal: {
-			get: function() {
-				if (this.start) {
-					return (this.startVal + this.min)
-				} else {
-					return this.val + this.min
-				}
-			},
-			set: function(newVal) {
-			}
-		},
-		refEndVal: {
-			get: function() {
-				if (this.start) {
-					return (this.val + this.min)
-				} else {
-					return this.val + this.min
-				}
-			},
-			set: function(newVal) {
-			}
-		},
-		rangeValue: {
-			get: function() {
-				if (this.start) {
-					return (this.sProgress || 0).toFixed(0) + ',' + (this.progress || 0).toFixed(0)
-				} else {
-					return (this.progress || 0).toFixed(0)
-				}
-			},
-			set: function(newVal) {
-			}
-		},
-		range() {
-			return Number(this.max) - Number(this.min)
-		},
-		part() {
-			return 100 / this.range
-		},
-		setStyle() {
-			var obj = {};
-			if (this.width) {
-				if (!isNaN(this.width)) {
-					obj.width = this.width + 'em';
-				} else if (this.width === 'full') {
-					obj.width = '100%';
-				} else {
-					obj.width = this.width;
-				}
-			}
-			return obj;
-		},
-		setClass() {
-			let arr = [];
-			if (this.inputProps.color) {
-				if (this.inputProps.color !== 'radam') {
-					arr.push(`to-input-color-${this.inputProps.color}`);
-				} else {
-					let colors = this.inputProps.$TouchUI.colors
-					let number = Math.round(Math.random() * 6)
-					arr.push(`to-input-color-${ colors[number]}`);
-				}
-			}
-			if (this.inputProps.placeholderColor) {
-				arr.push(`to-input-placeholder-color-${this.inputProps.placeholderColor}`);
-			}
-			if (this.inputProps.fillet !== 'none') {
-				arr.push(`to-input-fillet-${this.inputProps.fillet}`);
-			}
-			if (this.inputProps.filletPosition) {
-				arr.push(`to-input-fillet-position-${this.filletPosition}`);
-			}
-			if (this.inputProps.mode) {
-				arr.push(`to-input-mode-${this.inputProps.mode}`);
-			} else if (this.ToForm && this.ToForm.type === 'list') {
-				arr.push('to-input-mode-none')
-			} else {
-				arr.push('to-input-mode-default');
-			}
-			if (this.inputProps.stepIconMode === 'arrow') {
-				arr.push(`to-input-step-icon-mode-${this.inputProps.stepIconMode}`);
-			}
-			if (this.inputProps.readonly) {
-				arr.push('to-input-state-readonly');
-			}
-			if (this.inputProps.focused && !this.inputProps.preventFocus) {
-				arr.push('to-input-state-focus');
-			}
-			if (this.inputProps.changed) {
-				arr.push('to-input-changed')
-			}
-			if ((this.ToForm && this.ToForm.comparable) || this.inputProps.comparable) {
-				arr.push('to-compare')
-			}
-			return arr;
-		}
-	},
-	watch: {
-		readonly(val) {
-			this.disabled = val
-		},
-		value(val) {
-			if (this.start) {
-				if (val && String(val).split(',').length > 1) {
-					let value = val.split(',')
-					if (Number(value[0]) >= this.range) {
-						this.startVal = this.range
-					} else {
-						this.startVal = Number(value[0])
-					}
-					if (Number(value[1]) >= this.range) {
-						this.val = this.range
-					} else {
-						this.val = Number(value[1])
-					}
-				}
-			} else {
-				if (Number(val) >= this.range) {
-					this.val = this.range
-				} else {
-					this.val = Number(val)
-				}
-			}
-			this.initRangeVal()
-		}
-	},
-	mounted() {
-		// 这里注意range的value改变不会触发视图刷新
-		this.$nextTick(()=>{
-			this.length = this.$el.querySelector('.to-rangeBar').offsetWidth
-			this.initRangeVal()
-		})
-	},
-	methods: {
-		initRangeVal() {
-			if (this.start) {
-				if (this.value) {
-					let value = this.value.split(',')
-					this.startVal = Number(value[0]) < 0 ? 0 : (Number(value[0]) / this.range * this.range) - this.min || 0
-					this.val = Number(value[1]) < 0 ? 0 : (Number(value[1]) / this.range * this.range) - this.min || 0
-				} else {
-					this.startVal = 0
-					this.val = 0
-				}
-				this.startProgress = ((this.startVal) / this.range) * 100
-				this.rangeProgress = ((this.val) / this.range) * 100
-			} else {
-				this.val = Number(this.value) < 0 ? 0 : (Number(this.value) / this.range * this.range) - this.min || 0
-				this.rangeProgress = ((this.val) / this.range) * 100
-			}
-		},
-		rangeBarClick(e) {
-			if (this.disabled) return
-			if (this.dragging) {
-				let leftX = e.offsetX
-				this.x = e.clientX - leftX
-				if (this.start) {
-					let startLeft = this.startProgress / this.range * this.length
-					let endLeft = this.rangeProgress / this.range * this.length
-					let startLeftAbs = Math.abs(startLeft - leftX)
-					let endLeftAbs = Math.abs(endLeft - leftX)
-					if (startLeftAbs >= endLeftAbs) {
-						this.progress = leftX / this.length * this.range
-						this.progress = this.step ? this.step * Math.round(this.progress / this.step) : this.progress
-						if (this.progress <= 0) {
-							this.progress = 0
-						} else if (this.progress >= this.max) {
-							this.progress = this.max
-						}
-						let progress = ((this.val) / this.range) * 100
-						if (progress < 0) {
-							progress = 0
-						} else if (progress > 100) {
-							progress = 100
-						}
-						this.rangeProgress = progress
-					} else {
-						this.sProgress = leftX / this.length * this.range
-						this.sProgress = this.step ? this.step * Math.round(this.sProgress / this.step) : this.sProgress
-						if (this.sProgress <= 0) {
-							this.sProgress = 0
-						} else if (this.sProgress >= this.max) {
-							this.sProgress = this.max
-						}
-						let progress = ((this.startVal) / this.range) * 100
-						if (progress < 0) {
-							progress = 0
-						} else if (progress > 100) {
-							progress = 100
-						}
-						this.startProgress = progress
-					}
-				} else {
-					this.progress = leftX / this.length * this.range
-					this.progress = this.step ? this.step * Math.round(this.progress / this.step) : this.progress
-					if (this.progress <= 0) {
-						this.progress = 0
-					} else if (this.progress >= this.max) {
-						this.progress = this.max
-					}
-				}
-				this.$emit('change', this.rangeValue)
-			}
-		},
-		startHandle: function(e) {
-			if (this.disabled) return
-			this.isStart = true
-			this.isStartMove = 'start'
-			if (this.isStart) { this.startX = e.touches[0].clientX }
-		},
-		endStartHandle: function(e) {
-			if (this.disabled) return
-			this.isStart = true
-			this.isStartMove = 'end'
-			if (this.isStart) { this.endStartX = e.touches[0].clientX }
-		},
-		moveHandle: function(e) {
-			if (this.disabled) return
-			if (this.isStart) {
-				this.moveX = e.touches[0].clientX
-				if (this.isStartMove === 'end') {
-					this.progress = (this.x + this.moveX - this.endStartX) / this.length * this.range
-					if (this.progress <= 0) {
-						this.progress = 0
-					} else if (this.progress >= this.range) {
-						this.progress = this.range
-					}
-					let progress = ((this.progress) / this.range) * 100
-					if (progress < 0) {
-						progress = 0
-					} else if (progress > 100) {
-						progress = 100
-					}
-					this.rangeProgress = progress
-				} else if (this.isStartMove === 'start') {
-					this.sProgress = (this.sx + this.moveX - this.startX) / this.length * this.range
-					if (this.sProgress <= 0) {
-						this.sProgress = 0
-					} else if (this.sProgress >= this.range) {
-						this.sProgress = this.range
-					}
-					let progress = ((this.sProgress) / this.range) * 100
-					if (progress < 0) {
-						progress = 0
-					} else if (progress > 100) {
-						progress = 100
-					}
-					this.startProgress = progress
-				}
-			}
-		},
-		endHandle: function(e) {
-			if (this.disabled) return
-			if (this.isStart) {
-				if (this.isStartMove === 'end') {
-					this.x += this.moveX - this.startX
-					if (this.progress <= 0) {
-						this.x = 0
-					} else if (this.progress >= this.range) {
-						this.x = this.length
-					}
-				} else if (this.isStartMove === 'start') {
-					this.sx += this.moveX - this.endStartX
-					if (this.sProgress <= 0) {
-						this.sx = 0
-					} else if (this.sProgress >= this.range) {
-						this.sx = this.length
-					}
-				}
-				this.isStart = false
-			}
-			this.$emit('change', this.rangeValue)
-		},
-		inputStartHandle(e) {
-			const startVal = e.target.value
-			this.sProgress = startVal
-			this.startVal = (Number(startVal) / this.range * this.range) - this.min || 0
-			const that = this
-			let timer = null
-			timer = setTimeout(function() {
-				if (startVal < 0) {
-					that.sProgress = 0
-					that.startVal = 0
-				}
-				if (startVal > that.range) {
-					that.sProgress = that.range
-					that.startVal = that.range
-				}
-				that.startProgress = ((that.startVal) / that.range) * 100
-				that.$emit('change', that.rangeValue)
-				clearTimeout(timer)
-				timer = null
-			}, 0)
-		},
-		inputEndHandle(e) {
-			const endVal = e.target.value
-			this.progress = endVal
-			this.val = (Number(endVal) / this.range * this.range) - this.min || 0
-			this.startProgress = ((this.startVal) / this.range) * 100
-			this.rangeProgress = ((this.val) / this.range) * 100
-			const that = this
-			let timer = null
-			timer = setTimeout(function() {
-				if (endVal < 0) {
-					that.progress = 0
-					that.val = 0
-				}
-				if (endVal > that.range) {
-					that.progress = that.range
-					that.val = that.range
-				}
-				that.rangeProgress = ((that.val) / that.range) * 100
-				that.$emit('change', that.rangeValue)
-				clearTimeout(timer)
-				timer = null
-			}, 0)
-		},
-		inputHandle(e) {
-			if (!this.start) {
-				this.progress = e.target.value
-				if (Number(e.target.value) < 0) {
-					this.progress = 0
-				} else if (Number(e.target.value) > 100) {
-					this.progress = 100
-				}
-				this.val = Number(e.target.value) < 0 ? 0 : (Number(e.target.value) / this.range * this.range) - this.min || 0
-				this.rangeProgress = ((this.val) / this.range) * 100
-				const that = this
-				let timer = null
-				timer = setTimeout(function() {
-					if (e.target.value < 0) {
-						that.progress = 0
-						that.val = 0
-					}
-					if (e.target.value > that.range) {
-						that.progress = that.range
-						that.val = that.range
-					}
-					that.rangeProgress = ((that.val) / that.range) * 100
-					// that.value = 	that.rangeProgress
-					that.$emit('change', that.rangeValue)
-					clearTimeout(timer)
-					timer = null
-				}, 0)
-			}
-		},
-
-		onButtonDown(event) {
-			if (this.disabled) return;
-			event.preventDefault();
-			this.isStartMove = 'end'
-			this.onDragStart(event);
-			window.addEventListener('mousemove', this.onDragging);
-			window.addEventListener('touchmove', this.onDragging);
-			window.addEventListener('mouseup', this.onDragEnd);
-			window.addEventListener('touchend', this.onDragEnd);
-			window.addEventListener('contextmenu', this.onDragEnd);
-		},
-		onStartButtonDown(event) {
-			if (this.disabled) return;
-			event.preventDefault();
-			this.isStartMove = 'start'
-			this.onDragStart(event);
-			window.addEventListener('mousemove', this.onDragging);
-			window.addEventListener('touchmove', this.onDragging);
-			window.addEventListener('mouseup', this.onDragEnd);
-			window.addEventListener('touchend', this.onDragEnd);
-			window.addEventListener('contextmenu', this.onDragEnd);
-		},
-		onDragging(event) {
-			if (this.dragging) {
-				if (event.type === 'touchmove') {
-					event.clientY = event.touches[0].clientY;
-					event.clientX = event.touches[0].clientX;
-				}
-				var currentX = event.clientX;
-				if (this.isStartMove === 'end') {
-					let diff = (currentX - this.startMoveX) / this.length * this.range
-					this.progress = this.startPosition + diff;
-					if (this.progress <= 0) {
-						this.progress = 0
-					} else if (this.progress >= this.range) {
-						this.progress = this.range
-					}
-					if (this.startProgress >= this.progress) {
-						this.progress = this.startProgress
-					}
-					let progress = ((this.progress) / this.range) * 100
-					if (progress < 0) {
-						progress = 0
-					} else if (progress > 100) {
-						progress = 100
-					}
-					this.rangeProgress = progress
-				} else if (this.isStartMove === 'start') {
-					let diff = (currentX - this.sStartMoveX) / this.length * this.range
-					this.sProgress = this.sStartPosition + diff;
-					if (this.sProgress <= 0) {
-						this.sProgress = 0
-					} else if (this.sProgress >= this.rangeProgress) {
-						this.sProgress = this.rangeProgress
-					} else if (this.sProgress >= this.range) {
-						this.sProgress = this.range
-					}
-					let progress = ((this.sProgress) / this.range) * 100
-					if (progress < 0) {
-						progress = 0
-					} else if (progress > 100) {
-						progress = 100
-					}
-					this.startProgress = progress
-				}
-				this.$emit('change', this.rangeValue)
-			}
-		},
-		onDragStart(event) {
-			this.dragging = true;
-			if (event.type === 'touchstart') {
-				event.clientY = event.touches[0].clientY;
-				event.clientX = event.touches[0].clientX;
-			}
-			if (this.isStartMove === 'end') {
-				this.startMoveX = event.clientX;
-				this.startPosition = parseFloat(this.progress);
-			} else if (this.isStartMove === 'start') {
-				this.sStartMoveX = event.clientX;
-				this.sStartPosition = parseFloat(this.sProgress);
-			}
-		},
-		onDragEnd() {
-			if (this.dragging) {
-				if (this.isStartMove === 'end') {
-					this.progress = this.step ? this.step * Math.round(this.progress / this.step) : this.progress
-					let progress = ((this.val) / this.range) * 100
-					if (progress < 0) {
-						progress = 0
-					} else if (progress > 100) {
-						progress = 100
-					}
-					if (this.startProgress >= progress) {
-						progress = this.startProgress
-					}
-					this.rangeProgress = progress
-				} else if (this.isStartMove === 'start') {
-					this.sProgress = this.step ? this.step * Math.round(this.sProgress / this.step) : this.sProgress
-					let progress = ((this.startVal) / this.range) * 100
-					if (progress < 0) {
-						progress = 0
-					} else if (progress >= this.rangeProgress) {
-						progress = this.rangeProgress
-					} else if (progress > 100) {
-						progress = 100
-					}
-					this.startProgress = progress
-				}
-
-				/*
-				* 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
-				* 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
-				*/
-				this.dragging = false;
-				let timer = null
-				timer = setTimeout(() => {
-					this.dragging = true;
-					clearTimeout(timer)
-					timer = null
-				}, 200)
-				window.removeEventListener('mousemove', this.onDragging);
-				window.removeEventListener('touchmove', this.onDragging);
-				window.removeEventListener('mouseup', this.onDragEnd);
-				window.removeEventListener('touchend', this.onDragEnd);
-				window.removeEventListener('contextmenu', this.onDragEnd);
-			}
-		},
-		setDisabled(f) {
-			this.disabled = f
-		}
-	}
-}
-</script>
+<template>
+	<span class="to-range to-form-readonly" :style="setStyle" @touchmove="moveHandle($event)" @touchend="endHandle($event)">
+		<span class="to-rangeMain">
+			<span class="to-rangeBar" @click.stop="rangeBarClick($event)">
+				<span class="to-rangeProgress" :style="{width:(rangeProgress - startProgress) + '%',left: startProgress + '%'}">
+					<span v-if="start" ref="touchStartBar" :style="{zIndex: String(startProgress) === '100'?'100':'99'}" class="to-rangeStart" @mousedown="onStartButtonDown" @touchstart="startHandle($event)"></span>
+					<span ref="touchBar" class="to-rangeEnd" @mousedown="onButtonDown" @touchstart="endStartHandle($event)"></span>
+				</span>
+			</span>
+			<span v-if="showInput" class="to-rangeValue">
+				<span v-if="start" :class="setClass" class="to-input">
+					<to-input ref="rangeStartInput" v-model="refStartVal" type="number" mode="none" v-bind="inputProps" :min="min" :max="max" :clearable="false" :width="6" :readonly="disabled || !inputable" @blur="inputStartHandle"></to-input>
+					<span class="to-inputText to-inputText-narrow">~</span>
+					<to-input ref="rangeEndInput" v-model="refEndVal" type="number" mode="none" v-bind="inputProps" :min="min" :max="max" :clearable="false" :width="6" :readonly="disabled || !inputable" @blur="inputEndHandle"></to-input>
+				</span>
+				<!--				<to-input ref="rangeInput" v-model="refVal" v-bind="inputProps" fillet="normal" :min="min" :max="max" :clearable="false" :width="6" :readonly="readonly" @blur="inputHandle"></to-input>-->
+				<to-input v-else ref="rangeInput" v-model="refVal" v-bind="inputProps" type="number" :min="min" :max="max" :clearable="false" :width="6" :readonly="disabled || !inputable" @blur="inputHandle"></to-input>
+			</span>
+		</span>
+	</span>
+</template>
+<script>
+export default {
+	name: 'ToRange',
+	componentName: 'ToRange',
+	model: {
+		event: 'change'
+	},
+	props: {
+		value: {
+			type: [Number, String],
+			default: 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		inputable: {
+			type: Boolean,
+			default: true
+		},
+		max: {
+			type: [Number, String],
+			default: 100
+		},
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		ruler: {
+			type: Boolean,
+			default: false
+		},
+		start: {
+			type: Boolean,
+			default: false
+		},
+		step: {
+			type: [String, Number],
+			default: 1
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		valueWidth: {
+			type: [Number, String],
+			default: 0
+		},
+		showInput: Boolean,
+		inputProps: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	data() {
+		return {
+			disabled: this.readonly,
+			length: 0,
+			isStart: false,
+			progress: 0,
+			sProgress: 0,
+			dragging: true,
+			startX: 0,
+			endStartX: 0,
+			startMoveX: 0,
+			startPosition: 0,
+			currentX: 0,
+			moveX: 0,
+			endX: 0,
+			x: 0,
+			sx: 0,
+			isStartMove: 'start',
+			rangeProgress: 0,
+			sStartMoveX: 0,
+			sStartPosition: 0,
+			startProgress: 0,
+			startValue: 0
+		}
+	},
+	computed: {
+		val: {
+			get: function() {
+				return Math.round(this.progress / this.range * this.range) || 0
+			},
+			set: function(newVal) {
+				this.progress = newVal
+				this.x = this.length * this.progress / this.range
+			}
+		},
+		startVal: {
+			get: function() {
+				return Math.round(this.sProgress / this.range * this.range) || 0
+			},
+			set: function(newVal) {
+				this.sProgress = newVal
+				this.sx = this.length * this.sProgress / this.range
+			}
+		},
+		refVal: {
+			get: function() {
+				if (this.start) {
+					return (this.startVal + this.min) + ',' + (this.val + this.min)
+				} else {
+					return this.val + this.min
+				}
+			},
+			set: function(newVal) {
+			}
+		},
+		refStartVal: {
+			get: function() {
+				if (this.start) {
+					return (this.startVal + this.min)
+				} else {
+					return this.val + this.min
+				}
+			},
+			set: function(newVal) {
+			}
+		},
+		refEndVal: {
+			get: function() {
+				if (this.start) {
+					return (this.val + this.min)
+				} else {
+					return this.val + this.min
+				}
+			},
+			set: function(newVal) {
+			}
+		},
+		rangeValue: {
+			get: function() {
+				if (this.start) {
+					return (this.sProgress || 0).toFixed(0) + ',' + (this.progress || 0).toFixed(0)
+				} else {
+					return (this.progress || 0).toFixed(0)
+				}
+			},
+			set: function(newVal) {
+			}
+		},
+		range() {
+			return Number(this.max) - Number(this.min)
+		},
+		part() {
+			return 100 / this.range
+		},
+		setStyle() {
+			var obj = {};
+			if (this.width) {
+				if (!isNaN(this.width)) {
+					obj.width = this.width + 'em';
+				} else if (this.width === 'full') {
+					obj.width = '100%';
+				} else {
+					obj.width = this.width;
+				}
+			}
+			return obj;
+		},
+		setClass() {
+			let arr = [];
+			if (this.inputProps.color) {
+				if (this.inputProps.color !== 'radam') {
+					arr.push(`to-input-color-${this.inputProps.color}`);
+				} else {
+					let colors = this.inputProps.$TouchUI.colors
+					let number = Math.round(Math.random() * 6)
+					arr.push(`to-input-color-${ colors[number]}`);
+				}
+			}
+			if (this.inputProps.placeholderColor) {
+				arr.push(`to-input-placeholder-color-${this.inputProps.placeholderColor}`);
+			}
+			if (this.inputProps.fillet !== 'none') {
+				arr.push(`to-input-fillet-${this.inputProps.fillet}`);
+			}
+			if (this.inputProps.filletPosition) {
+				arr.push(`to-input-fillet-position-${this.filletPosition}`);
+			}
+			if (this.inputProps.mode) {
+				arr.push(`to-input-mode-${this.inputProps.mode}`);
+			} else if (this.ToForm && this.ToForm.type === 'list') {
+				arr.push('to-input-mode-none')
+			} else {
+				arr.push('to-input-mode-default');
+			}
+			if (this.inputProps.stepIconMode === 'arrow') {
+				arr.push(`to-input-step-icon-mode-${this.inputProps.stepIconMode}`);
+			}
+			if (this.inputProps.readonly) {
+				arr.push('to-input-state-readonly');
+			}
+			if (this.inputProps.focused && !this.inputProps.preventFocus) {
+				arr.push('to-input-state-focus');
+			}
+			if (this.inputProps.changed) {
+				arr.push('to-input-changed')
+			}
+			if ((this.ToForm && this.ToForm.comparable) || this.inputProps.comparable) {
+				arr.push('to-compare')
+			}
+			return arr;
+		}
+	},
+	watch: {
+		readonly(val) {
+			this.disabled = val
+		},
+		value(val) {
+			if (this.start) {
+				if (val && String(val).split(',').length > 1) {
+					let value = val.split(',')
+					if (Number(value[0]) >= this.range) {
+						this.startVal = this.range
+					} else {
+						this.startVal = Number(value[0])
+					}
+					if (Number(value[1]) >= this.range) {
+						this.val = this.range
+					} else {
+						this.val = Number(value[1])
+					}
+				}
+			} else {
+				if (Number(val) >= this.range) {
+					this.val = this.range
+				} else {
+					this.val = Number(val)
+				}
+			}
+			this.initRangeVal()
+		}
+	},
+	mounted() {
+		// 这里注意range的value改变不会触发视图刷新
+		this.$nextTick(()=>{
+			this.length = this.$el.querySelector('.to-rangeBar').offsetWidth
+			this.initRangeVal()
+		})
+	},
+	methods: {
+		initRangeVal() {
+			if (this.start) {
+				if (this.value) {
+					let value = this.value.split(',')
+					this.startVal = Number(value[0]) < 0 ? 0 : (Number(value[0]) / this.range * this.range) - this.min || 0
+					this.val = Number(value[1]) < 0 ? 0 : (Number(value[1]) / this.range * this.range) - this.min || 0
+				} else {
+					this.startVal = 0
+					this.val = 0
+				}
+				this.startProgress = ((this.startVal) / this.range) * 100
+				this.rangeProgress = ((this.val) / this.range) * 100
+			} else {
+				this.val = Number(this.value) < 0 ? 0 : (Number(this.value) / this.range * this.range) - this.min || 0
+				this.rangeProgress = ((this.val) / this.range) * 100
+			}
+		},
+		rangeBarClick(e) {
+			if (this.disabled) return
+			if (this.dragging) {
+				let leftX = e.offsetX
+				this.x = e.clientX - leftX
+				if (this.start) {
+					let startLeft = this.startProgress / this.range * this.length
+					let endLeft = this.rangeProgress / this.range * this.length
+					let startLeftAbs = Math.abs(startLeft - leftX)
+					let endLeftAbs = Math.abs(endLeft - leftX)
+					if (startLeftAbs >= endLeftAbs) {
+						this.progress = leftX / this.length * this.range
+						this.progress = this.step ? this.step * Math.round(this.progress / this.step) : this.progress
+						if (this.progress <= 0) {
+							this.progress = 0
+						} else if (this.progress >= this.max) {
+							this.progress = this.max
+						}
+						let progress = ((this.val) / this.range) * 100
+						if (progress < 0) {
+							progress = 0
+						} else if (progress > 100) {
+							progress = 100
+						}
+						this.rangeProgress = progress
+					} else {
+						this.sProgress = leftX / this.length * this.range
+						this.sProgress = this.step ? this.step * Math.round(this.sProgress / this.step) : this.sProgress
+						if (this.sProgress <= 0) {
+							this.sProgress = 0
+						} else if (this.sProgress >= this.max) {
+							this.sProgress = this.max
+						}
+						let progress = ((this.startVal) / this.range) * 100
+						if (progress < 0) {
+							progress = 0
+						} else if (progress > 100) {
+							progress = 100
+						}
+						this.startProgress = progress
+					}
+				} else {
+					this.progress = leftX / this.length * this.range
+					this.progress = this.step ? this.step * Math.round(this.progress / this.step) : this.progress
+					if (this.progress <= 0) {
+						this.progress = 0
+					} else if (this.progress >= this.max) {
+						this.progress = this.max
+					}
+				}
+				this.$emit('change', this.rangeValue)
+			}
+		},
+		startHandle: function(e) {
+			if (this.disabled) return
+			this.isStart = true
+			this.isStartMove = 'start'
+			if (this.isStart) { this.startX = e.touches[0].clientX }
+		},
+		endStartHandle: function(e) {
+			if (this.disabled) return
+			this.isStart = true
+			this.isStartMove = 'end'
+			if (this.isStart) { this.endStartX = e.touches[0].clientX }
+		},
+		moveHandle: function(e) {
+			if (this.disabled) return
+			if (this.isStart) {
+				this.moveX = e.touches[0].clientX
+				if (this.isStartMove === 'end') {
+					this.progress = (this.x + this.moveX - this.endStartX) / this.length * this.range
+					if (this.progress <= 0) {
+						this.progress = 0
+					} else if (this.progress >= this.range) {
+						this.progress = this.range
+					}
+					let progress = ((this.progress) / this.range) * 100
+					if (progress < 0) {
+						progress = 0
+					} else if (progress > 100) {
+						progress = 100
+					}
+					this.rangeProgress = progress
+				} else if (this.isStartMove === 'start') {
+					this.sProgress = (this.sx + this.moveX - this.startX) / this.length * this.range
+					if (this.sProgress <= 0) {
+						this.sProgress = 0
+					} else if (this.sProgress >= this.range) {
+						this.sProgress = this.range
+					}
+					let progress = ((this.sProgress) / this.range) * 100
+					if (progress < 0) {
+						progress = 0
+					} else if (progress > 100) {
+						progress = 100
+					}
+					this.startProgress = progress
+				}
+			}
+		},
+		endHandle: function(e) {
+			if (this.disabled) return
+			if (this.isStart) {
+				if (this.isStartMove === 'end') {
+					this.x += this.moveX - this.startX
+					if (this.progress <= 0) {
+						this.x = 0
+					} else if (this.progress >= this.range) {
+						this.x = this.length
+					}
+				} else if (this.isStartMove === 'start') {
+					this.sx += this.moveX - this.endStartX
+					if (this.sProgress <= 0) {
+						this.sx = 0
+					} else if (this.sProgress >= this.range) {
+						this.sx = this.length
+					}
+				}
+				this.isStart = false
+			}
+			this.$emit('change', this.rangeValue)
+		},
+		inputStartHandle(e) {
+			const startVal = e.target.value
+			this.sProgress = startVal
+			this.startVal = (Number(startVal) / this.range * this.range) - this.min || 0
+			const that = this
+			let timer = null
+			timer = setTimeout(function() {
+				if (startVal < 0) {
+					that.sProgress = 0
+					that.startVal = 0
+				}
+				if (startVal > that.range) {
+					that.sProgress = that.range
+					that.startVal = that.range
+				}
+				that.startProgress = ((that.startVal) / that.range) * 100
+				that.$emit('change', that.rangeValue)
+				clearTimeout(timer)
+				timer = null
+			}, 0)
+		},
+		inputEndHandle(e) {
+			const endVal = e.target.value
+			this.progress = endVal
+			this.val = (Number(endVal) / this.range * this.range) - this.min || 0
+			this.startProgress = ((this.startVal) / this.range) * 100
+			this.rangeProgress = ((this.val) / this.range) * 100
+			const that = this
+			let timer = null
+			timer = setTimeout(function() {
+				if (endVal < 0) {
+					that.progress = 0
+					that.val = 0
+				}
+				if (endVal > that.range) {
+					that.progress = that.range
+					that.val = that.range
+				}
+				that.rangeProgress = ((that.val) / that.range) * 100
+				that.$emit('change', that.rangeValue)
+				clearTimeout(timer)
+				timer = null
+			}, 0)
+		},
+		inputHandle(e) {
+			if (!this.start) {
+				this.progress = e.target.value
+				if (Number(e.target.value) < 0) {
+					this.progress = 0
+				} else if (Number(e.target.value) > 100) {
+					this.progress = 100
+				}
+				this.val = Number(e.target.value) < 0 ? 0 : (Number(e.target.value) / this.range * this.range) - this.min || 0
+				this.rangeProgress = ((this.val) / this.range) * 100
+				const that = this
+				let timer = null
+				timer = setTimeout(function() {
+					if (e.target.value < 0) {
+						that.progress = 0
+						that.val = 0
+					}
+					if (e.target.value > that.range) {
+						that.progress = that.range
+						that.val = that.range
+					}
+					that.rangeProgress = ((that.val) / that.range) * 100
+					// that.value = 	that.rangeProgress
+					that.$emit('change', that.rangeValue)
+					clearTimeout(timer)
+					timer = null
+				}, 0)
+			}
+		},
+
+		onButtonDown(event) {
+			if (this.disabled) return;
+			event.preventDefault();
+			this.isStartMove = 'end'
+			this.onDragStart(event);
+			window.addEventListener('mousemove', this.onDragging);
+			window.addEventListener('touchmove', this.onDragging);
+			window.addEventListener('mouseup', this.onDragEnd);
+			window.addEventListener('touchend', this.onDragEnd);
+			window.addEventListener('contextmenu', this.onDragEnd);
+		},
+		onStartButtonDown(event) {
+			if (this.disabled) return;
+			event.preventDefault();
+			this.isStartMove = 'start'
+			this.onDragStart(event);
+			window.addEventListener('mousemove', this.onDragging);
+			window.addEventListener('touchmove', this.onDragging);
+			window.addEventListener('mouseup', this.onDragEnd);
+			window.addEventListener('touchend', this.onDragEnd);
+			window.addEventListener('contextmenu', this.onDragEnd);
+		},
+		onDragging(event) {
+			if (this.dragging) {
+				if (event.type === 'touchmove') {
+					event.clientY = event.touches[0].clientY;
+					event.clientX = event.touches[0].clientX;
+				}
+				var currentX = event.clientX;
+				if (this.isStartMove === 'end') {
+					let diff = (currentX - this.startMoveX) / this.length * this.range
+					this.progress = this.startPosition + diff;
+					if (this.progress <= 0) {
+						this.progress = 0
+					} else if (this.progress >= this.range) {
+						this.progress = this.range
+					}
+					if (this.startProgress >= this.progress) {
+						this.progress = this.startProgress
+					}
+					let progress = ((this.progress) / this.range) * 100
+					if (progress < 0) {
+						progress = 0
+					} else if (progress > 100) {
+						progress = 100
+					}
+					this.rangeProgress = progress
+				} else if (this.isStartMove === 'start') {
+					let diff = (currentX - this.sStartMoveX) / this.length * this.range
+					this.sProgress = this.sStartPosition + diff;
+					if (this.sProgress <= 0) {
+						this.sProgress = 0
+					} else if (this.sProgress >= this.rangeProgress) {
+						this.sProgress = this.rangeProgress
+					} else if (this.sProgress >= this.range) {
+						this.sProgress = this.range
+					}
+					let progress = ((this.sProgress) / this.range) * 100
+					if (progress < 0) {
+						progress = 0
+					} else if (progress > 100) {
+						progress = 100
+					}
+					this.startProgress = progress
+				}
+				this.$emit('change', this.rangeValue)
+			}
+		},
+		onDragStart(event) {
+			this.dragging = true;
+			if (event.type === 'touchstart') {
+				event.clientY = event.touches[0].clientY;
+				event.clientX = event.touches[0].clientX;
+			}
+			if (this.isStartMove === 'end') {
+				this.startMoveX = event.clientX;
+				this.startPosition = parseFloat(this.progress);
+			} else if (this.isStartMove === 'start') {
+				this.sStartMoveX = event.clientX;
+				this.sStartPosition = parseFloat(this.sProgress);
+			}
+		},
+		onDragEnd() {
+			if (this.dragging) {
+				if (this.isStartMove === 'end') {
+					this.progress = this.step ? this.step * Math.round(this.progress / this.step) : this.progress
+					let progress = ((this.val) / this.range) * 100
+					if (progress < 0) {
+						progress = 0
+					} else if (progress > 100) {
+						progress = 100
+					}
+					if (this.startProgress >= progress) {
+						progress = this.startProgress
+					}
+					this.rangeProgress = progress
+				} else if (this.isStartMove === 'start') {
+					this.sProgress = this.step ? this.step * Math.round(this.sProgress / this.step) : this.sProgress
+					let progress = ((this.startVal) / this.range) * 100
+					if (progress < 0) {
+						progress = 0
+					} else if (progress >= this.rangeProgress) {
+						progress = this.rangeProgress
+					} else if (progress > 100) {
+						progress = 100
+					}
+					this.startProgress = progress
+				}
+
+				/*
+				* 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
+				* 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
+				*/
+				this.dragging = false;
+				let timer = null
+				timer = setTimeout(() => {
+					this.dragging = true;
+					clearTimeout(timer)
+					timer = null
+				}, 200)
+				window.removeEventListener('mousemove', this.onDragging);
+				window.removeEventListener('touchmove', this.onDragging);
+				window.removeEventListener('mouseup', this.onDragEnd);
+				window.removeEventListener('touchend', this.onDragEnd);
+				window.removeEventListener('contextmenu', this.onDragEnd);
+			}
+		},
+		setDisabled(f) {
+			this.disabled = f
+		}
+	}
+}
+</script>