720 lines
22 KiB
Vue
720 lines
22 KiB
Vue
<template>
|
||
<view
|
||
:style="tools._style([customStyle])"
|
||
:class="
|
||
tools.cls(classPrefix, [
|
||
['top', label || scaleTextArray.length],
|
||
['disabled', disabled],
|
||
['range', range]
|
||
]) +
|
||
' ' +
|
||
tClass +
|
||
' ' +
|
||
(vertical ? classPrefix + '--vertical' : '')
|
||
"
|
||
>
|
||
<block v-if="!range">
|
||
<text
|
||
v-if="showExtremeValue"
|
||
:class="classPrefix + '__value ' + classPrefix + '__value--min'"
|
||
>
|
||
{{ label ? getValue(label, min) : min }}
|
||
</text>
|
||
<view
|
||
id="sliderLine"
|
||
:class="tools.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']]) + ' ' + tClassBar"
|
||
@click="onSingleLineTap"
|
||
>
|
||
<block v-if="isScale">
|
||
<view
|
||
v-for="(item, index) in scaleArray"
|
||
:key="index"
|
||
:class="
|
||
tools.cls(classPrefix + '__scale-item', [
|
||
['active', _value >= item.val],
|
||
['disabled', disabled],
|
||
theme,
|
||
['hidden', ((index == 0 || index == scaleArray.length - 1) && theme == 'capsule') || value == item.val]
|
||
])
|
||
"
|
||
:style="(vertical ? 'top' : 'left') + ':' + item.left + 'px; ' + (vertical ? 'transform: translate(-50%, -50%);' : 'transform: translateX(-50%);')"
|
||
:aria-hidden="true"
|
||
>
|
||
<view
|
||
v-if="scaleTextArray.length"
|
||
:class="tools.cls(classPrefix + '__scale-desc', [theme])"
|
||
>
|
||
{{ scaleTextArray[index] }}
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view
|
||
:class="tools.cls(classPrefix + '__line', [['disabled', disabled], theme, 'single']) + ' ' + tClassBarActive"
|
||
:style="(vertical ? 'height' : 'width') + ': ' + lineBarWidth"
|
||
>
|
||
<view
|
||
id="singleDot"
|
||
:class="classPrefix + '__dot ' + tClassCursor"
|
||
@touchstart.stop.prevent="onTouchStart"
|
||
@touchmove.stop.prevent="onSingleLineTap"
|
||
@touchend.stop.prevent="onTouchEnd"
|
||
@touchcancel.stop.prevent="onTouchEnd"
|
||
>
|
||
<view
|
||
v-if="label || isVisibleToScreenReader"
|
||
:class="tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
|
||
aria-role="alert"
|
||
aria-live="assertive"
|
||
:aria-hidden="!isVisibleToScreenReader"
|
||
>
|
||
{{ getValue(label, _value) || _value }}
|
||
</view>
|
||
<view
|
||
:class="classPrefix + '__dot-slider'"
|
||
aria-role="slider"
|
||
:aria-disabled="disabled"
|
||
:aria-valuemax="max"
|
||
:aria-valuemin="min"
|
||
:aria-valuenow="_value"
|
||
:aria-valuetext="getValue(label, _value) || _value"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text
|
||
v-if="showExtremeValue"
|
||
:class="classPrefix + '__value ' + classPrefix + '__value--max'"
|
||
>
|
||
{{ label ? getValue(label, max) : max }}
|
||
</text>
|
||
</block>
|
||
<block v-if="range">
|
||
<view
|
||
v-if="showExtremeValue"
|
||
:class="classPrefix + '__range-extreme ' + classPrefix + '__range-extreme--min'"
|
||
>
|
||
{{ min }}
|
||
</view>
|
||
<view
|
||
id="sliderLine"
|
||
:class="tools.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']]) + ' ' + tClassBar"
|
||
@click="onLineTap"
|
||
>
|
||
<block v-if="isScale">
|
||
<view
|
||
v-for="(item, index) in scaleArray"
|
||
:key="index"
|
||
:class="
|
||
tools.cls(classPrefix + '__scale-item', [
|
||
['active', dotTopValue[1] >= item.val && item.val >= dotTopValue[0]],
|
||
['disabled', disabled],
|
||
theme,
|
||
['hidden', ((index == 0 || index == scaleArray.length - 1) && theme == 'capsule') || value == item.val]
|
||
])
|
||
"
|
||
:style="(vertical ? 'top' : 'left') + ':' + item.left + 'px; ' + (vertical ? 'transform: translate(-50%, -50%);' : 'transform: translateX(-50%);')"
|
||
:aria-hidden="true"
|
||
>
|
||
<view
|
||
v-if="scaleTextArray.length"
|
||
:class="tools.cls(classPrefix + '__scale-desc', [theme])"
|
||
>
|
||
{{ scaleTextArray[index] }}
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view
|
||
:class="tools.cls(classPrefix + '__line', [['disabled', disabled], theme]) + ' ' + tClassBarActive"
|
||
:style="(vertical ? 'top' : 'left') + ': ' + lineLeft + 'px; ' + (vertical ? 'bottom' : 'right') + ': ' + lineRight + 'px'"
|
||
>
|
||
<view
|
||
id="leftDot"
|
||
:class="classPrefix + '__dot ' + classPrefix + '__dot--left ' + tClassCursor"
|
||
@touchstart.stop.prevent="onTouchStart"
|
||
@touchmove.stop.prevent="onTouchMoveLeft"
|
||
@touchend.stop.prevent="onTouchEnd"
|
||
@touchcancel.stop.prevent="onTouchEnd"
|
||
>
|
||
<view
|
||
v-if="label || isVisibleToScreenReader"
|
||
:class="tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
|
||
aria-role="alert"
|
||
aria-live="assertive"
|
||
:aria-hidden="!isVisibleToScreenReader"
|
||
>
|
||
{{ getValue(label, dotTopValue[0]) || dotTopValue[0] }}
|
||
</view>
|
||
<view
|
||
:class="classPrefix + '__dot-slider'"
|
||
aria-role="slider"
|
||
:aria-disabled="disabled"
|
||
:aria-valuemax="max"
|
||
:aria-valuemin="min"
|
||
:aria-valuenow="dotTopValue[0]"
|
||
:aria-valuetext="getValue(label, dotTopValue[0]) || dotTopValue[0]"
|
||
/>
|
||
</view>
|
||
<view
|
||
id="rightDot"
|
||
:class="classPrefix + '__dot ' + classPrefix + '__dot--right ' + tClassCursor"
|
||
@touchstart.stop.prevent="onTouchStart"
|
||
@touchmove.stop.prevent="onTouchMoveRight"
|
||
@touchend.stop.prevent="onTouchEnd"
|
||
@touchcancel.stop.prevent="onTouchEnd"
|
||
>
|
||
<view
|
||
v-if="label || isVisibleToScreenReader"
|
||
:class="tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
|
||
aria-role="alert"
|
||
aria-live="assertive"
|
||
:aria-hidden="!isVisibleToScreenReader"
|
||
>
|
||
{{ getValue(label, dotTopValue[1]) || dotTopValue[1] }}
|
||
</view>
|
||
<view
|
||
:class="classPrefix + '__dot-slider'"
|
||
aria-role="slider"
|
||
:aria-disabled="disabled"
|
||
:aria-valuemax="max"
|
||
:aria-valuemin="min"
|
||
:aria-valuenow="dotTopValue[1]"
|
||
:aria-valuetext="getValue(label, dotTopValue[1]) || dotTopValue[1]"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="showExtremeValue"
|
||
:class="classPrefix + '__range-extreme ' + classPrefix + '__range-extreme--max'"
|
||
>
|
||
{{ max }}
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { uniComponent } from '../common/src/index';
|
||
import { prefix } from '../common/config';
|
||
import { trimSingleValue, trimValue } from './tool';
|
||
import props from './props';
|
||
import { getRect, coalesce, nextTick } from '../common/utils';
|
||
import Bus from '../common/bus';
|
||
import tools from '../common/utils.wxs';
|
||
import { getValue } from './computed.js';
|
||
import { isString, isFunction } from '../common/validator';
|
||
|
||
|
||
const name = `${prefix}-slider`;
|
||
|
||
export default uniComponent({
|
||
name,
|
||
options: {
|
||
styleIsolation: 'shared',
|
||
},
|
||
controlledProps: [
|
||
{
|
||
key: 'value',
|
||
event: 'change',
|
||
},
|
||
],
|
||
externalClasses: [
|
||
`${prefix}-class`,
|
||
`${prefix}-class-bar`,
|
||
`${prefix}-class-bar-active`,
|
||
`${prefix}-class-bar-disabled`,
|
||
`${prefix}-class-cursor`,
|
||
],
|
||
props: {
|
||
...props,
|
||
},
|
||
data() {
|
||
return {
|
||
// 按钮样式列表
|
||
sliderStyles: '',
|
||
classPrefix: name,
|
||
initialLeft: null,
|
||
initialRight: null,
|
||
activeLeft: 0,
|
||
activeRight: 0,
|
||
maxRange: 0,
|
||
lineLeft: 0,
|
||
lineRight: 0,
|
||
dotTopValue: [0, 0],
|
||
_value: 0,
|
||
blockSize: 20,
|
||
isScale: false,
|
||
scaleArray: [],
|
||
scaleTextArray: [],
|
||
prefix,
|
||
realLabel: '',
|
||
extremeLabel: [],
|
||
isVisibleToScreenReader: false,
|
||
identifier: [-1, -1],
|
||
__inited: false,
|
||
tools,
|
||
|
||
lineBarWidth: 0,
|
||
};
|
||
},
|
||
watch: {
|
||
value: {
|
||
handler(newValue) {
|
||
this.handlePropsChange(newValue);
|
||
},
|
||
// immediate: true,
|
||
deep: true,
|
||
},
|
||
_value: {
|
||
handler(newValue) {
|
||
this.bus.on('initial', () => this.renderLine(newValue));
|
||
this.toggleA11yTips();
|
||
},
|
||
// immediate: true,
|
||
deep: true,
|
||
},
|
||
marks: {
|
||
handler(val) {
|
||
this.bus.on('initial', () => this.handleMark(val));
|
||
},
|
||
// immediate: true,
|
||
deep: true,
|
||
},
|
||
label: {
|
||
handler(val) {
|
||
this.isShowLabel = Boolean(val);
|
||
},
|
||
immediate: true,
|
||
},
|
||
showExtremeValue: 'getwExtremeLabel',
|
||
min: 'getwExtremeLabel',
|
||
max: 'getwExtremeLabel',
|
||
},
|
||
created() {
|
||
this.bus = new Bus();
|
||
this.bus.on('initial', () => this.handleMark(this.marks));
|
||
this.bus.on('initial', () => {
|
||
nextTick().then(() => {
|
||
this.renderLine(this._value);
|
||
});
|
||
});
|
||
this.toggleA11yTips();
|
||
},
|
||
mounted() {
|
||
const { value, defaultValue } = this;
|
||
// if (!value)
|
||
this.handlePropsChange(coalesce(value, defaultValue, 0));
|
||
this.init();
|
||
this.injectPageScroll();
|
||
},
|
||
|
||
methods: {
|
||
getValue,
|
||
getwExtremeLabel() {
|
||
const { showExtremeValue, min, max } = this;
|
||
if (!showExtremeValue) return;
|
||
|
||
this.extremeLabel = [this.getLabelByValue(Number(min), 'min'), this.getLabelByValue(Number(max), 'max')];
|
||
},
|
||
injectPageScroll() {
|
||
const { range, vertical } = this;
|
||
if (!range || !vertical) return;
|
||
const pages = getCurrentPages() || [];
|
||
let curPage = null;
|
||
if (pages && pages.length - 1 >= 0) {
|
||
curPage = pages[pages.length - 1];
|
||
}
|
||
if (!curPage) return;
|
||
const originPageScroll = curPage?.onPageScroll;
|
||
curPage.onPageScroll = (rest) => {
|
||
originPageScroll?.call(this, rest);
|
||
this.observerScrollTop(rest);
|
||
};
|
||
},
|
||
|
||
observerScrollTop(rest) {
|
||
const { scrollTop } = rest || {};
|
||
this.pageScrollTop = scrollTop;
|
||
},
|
||
|
||
toggleA11yTips() {
|
||
this.isVisibleToScreenReader = true;
|
||
|
||
setTimeout(() => {
|
||
this.isVisibleToScreenReader = false;
|
||
}, 2000);
|
||
},
|
||
|
||
renderLine(val) {
|
||
const { min, max, range } = this;
|
||
const { maxRange } = this;
|
||
|
||
if (range) {
|
||
const left = (maxRange * (val[0] - Number(min))) / (Number(max) - Number(min));
|
||
const right = (maxRange * (Number(max) - val[1])) / (Number(max) - Number(min));
|
||
// 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
|
||
this.setLineStyle(left, right);
|
||
} else {
|
||
this.setSingleBarWidth(val);
|
||
}
|
||
},
|
||
|
||
triggerValue(value) {
|
||
const { min, max, range } = this;
|
||
const trimmedValue = trimValue(value, {
|
||
min, max, range,
|
||
});
|
||
|
||
if (JSON.stringify(this.preval) === JSON.stringify(trimmedValue)) return;
|
||
this.preval = value;
|
||
|
||
this._trigger('change', {
|
||
value: trimmedValue,
|
||
});
|
||
if (this._selfControlled) {
|
||
this._value = trimmedValue;
|
||
}
|
||
},
|
||
|
||
getLabelByValue(value, position) {
|
||
const { label } = this;
|
||
|
||
if (isString(label)) {
|
||
let text = String(value);
|
||
try {
|
||
const rule = /\${value}%/g;
|
||
const enableToReplace = rule.test(label);
|
||
if (enableToReplace) {
|
||
text = label.replace(rule, String(value));
|
||
} else {
|
||
text = label;
|
||
throw new Error();
|
||
}
|
||
} catch (e) {
|
||
|
||
}
|
||
return text;
|
||
}
|
||
|
||
if (isFunction(label)) {
|
||
return label(value, position);
|
||
}
|
||
|
||
return String(value);
|
||
},
|
||
|
||
handlePropsChange(newValue) {
|
||
const { min, max, range } = this;
|
||
|
||
const value = trimValue(newValue, {
|
||
min, max, range,
|
||
});
|
||
|
||
const realLabel = this.getLabelByValue(value);
|
||
|
||
// 避免受控模式下死循环，同时不影响初始化后的首次点击
|
||
if (this.preval !== undefined) {
|
||
this.preval = value;
|
||
}
|
||
|
||
const setValueAndTrigger = () => {
|
||
this._value = value;
|
||
this.realLabel = realLabel;
|
||
};
|
||
|
||
// 基本样式未初始化，等待初始化后在改变数据。
|
||
if (this.maxRange === 0) {
|
||
this.init().then(setValueAndTrigger);
|
||
return;
|
||
}
|
||
|
||
setValueAndTrigger();
|
||
},
|
||
|
||
valueToPosition(value) {
|
||
const { min, max, theme } = this;
|
||
const { blockSize, maxRange } = this;
|
||
const halfBlock = (theme) === 'capsule' ? Number(blockSize) / 2 : 0;
|
||
|
||
return Math.round(((Number(value) - Number(min)) / (Number(max) - Number(min))) * maxRange) + halfBlock;
|
||
},
|
||
|
||
handleMark(marks) {
|
||
const calcPos = arr => arr.map(item => ({
|
||
val: item,
|
||
left: this.valueToPosition(item),
|
||
}));
|
||
|
||
if (marks?.length && Array.isArray(marks)) {
|
||
this.isScale = true;
|
||
this.scaleArray = calcPos(marks);
|
||
this.scaleTextArray = [];
|
||
}
|
||
|
||
if (Object.prototype.toString.call(marks) === '[object Object]') {
|
||
const scaleArray = Object.keys(marks).map(item => Number(item));
|
||
const scaleTextArray = scaleArray.map(item => marks[item]);
|
||
|
||
this.isScale = scaleArray.length > 0;
|
||
this.scaleArray = calcPos(scaleArray);
|
||
this.scaleTextArray = scaleTextArray;
|
||
}
|
||
},
|
||
|
||
setSingleBarWidth(value) {
|
||
const width = this.valueToPosition(value);
|
||
|
||
this.lineBarWidth = `${width}px`;
|
||
},
|
||
|
||
async init() {
|
||
if (this.__inited) return;
|
||
await this.getInitialInfo();
|
||
this.__inited = true;
|
||
this.bus.emit('initial');
|
||
},
|
||
|
||
async getInitialInfo() {
|
||
const line = await getRect(this, '#sliderLine');
|
||
const { blockSize } = this;
|
||
const { theme, vertical } = this;
|
||
const halfBlock = Number(blockSize) / 2;
|
||
const { top, bottom, right, left } = line;
|
||
let maxRange = vertical ? bottom - top : right - left;
|
||
let initialLeft = vertical ? top : left;
|
||
let initialRight = vertical ? bottom : right;
|
||
if (initialLeft === 0 && initialRight === 0) return;
|
||
|
||
if ((theme) === 'capsule') {
|
||
maxRange = maxRange - Number(blockSize) - 6; // 6 是边框宽度
|
||
initialLeft -= halfBlock;
|
||
initialRight -= halfBlock;
|
||
}
|
||
|
||
this.maxRange = maxRange;
|
||
this.initialLeft = initialLeft;
|
||
this.initialRight = initialRight;
|
||
},
|
||
|
||
stepValue(value) {
|
||
const { step, min, max } = this;
|
||
const decimal = String(step).indexOf('.') > -1 ? String(step).length - String(step).indexOf('.') - 1 : 0;
|
||
const closestStep = trimSingleValue(
|
||
Number((Math.round(value / Number(step)) * Number(step)).toFixed(decimal)),
|
||
Number(min),
|
||
Number(max),
|
||
);
|
||
return closestStep;
|
||
},
|
||
|
||
// 点击滑动条的事件
|
||
async onSingleLineTap(e) {
|
||
await this.getInitialInfo();
|
||
const { disabled } = this;
|
||
if (disabled) return;
|
||
const isSingleLineTap = this.identifier[0] === -1; // 区分点击滑动条和单游标的滑动
|
||
if (isSingleLineTap) {
|
||
const [touch] = e.changedTouches;
|
||
this.identifier[0] = touch.identifier;
|
||
}
|
||
const value = await this.getSingleChangeValue(e);
|
||
|
||
if (isSingleLineTap) {
|
||
this.identifier[0] = -1;
|
||
}
|
||
this.triggerValue(value);
|
||
},
|
||
|
||
async getSingleChangeValue(e) {
|
||
// await this.getInitialInfo();
|
||
const { min, max, theme, vertical } = this;
|
||
const { initialLeft, maxRange, blockSize } = this;
|
||
const touch = e.changedTouches.find(item => item.identifier === this.identifier[0]);
|
||
if (!touch) return;
|
||
const pagePosition = this.getPagePosition(touch);
|
||
|
||
let offset = 0;
|
||
if ((theme) === 'capsule') {
|
||
offset = Number(blockSize);
|
||
if (vertical) {
|
||
}
|
||
offset += 3;
|
||
} else if (vertical) {
|
||
}
|
||
|
||
const currentLeft = pagePosition - initialLeft - offset;
|
||
let value = 0;
|
||
if (currentLeft <= 0) {
|
||
value = Number(min);
|
||
} else if (currentLeft >= maxRange) {
|
||
value = Number(max);
|
||
} else {
|
||
value = (currentLeft / maxRange) * (Number(max) - Number(min)) + Number(min);
|
||
}
|
||
return this.stepValue(value);
|
||
},
|
||
|
||
/**
|
||
* 将位置转换为值
|
||
*
|
||
* @param {number} posValue 位置数据
|
||
* @param {(0 | 1)} dir 方向： 0-left， 1-right
|
||
* @return {number}
|
||
* @memberof Slider
|
||
*/
|
||
convertPosToValue(posValue, dir) {
|
||
const { maxRange } = this;
|
||
const { max, min } = this;
|
||
return dir === 0
|
||
? (posValue / maxRange) * (Number(max) - Number(min)) + Number(min)
|
||
: Number(max) - (posValue / maxRange) * (Number(max) - Number(min));
|
||
},
|
||
|
||
// 点击范围选择滑动条的事件
|
||
onLineTap(e) {
|
||
const { disabled, theme, vertical } = this;
|
||
const { initialLeft, initialRight, maxRange, blockSize } = this;
|
||
if (disabled) return;
|
||
|
||
const [touch] = e.changedTouches;
|
||
const pagePosition = this.getPagePosition(touch);
|
||
const halfBlock = (theme) === 'capsule' ? Number(blockSize) / 2 : 0;
|
||
|
||
const currentLeft = pagePosition - initialLeft;
|
||
const currentRight = -(pagePosition - initialRight);
|
||
if (currentLeft < 0 || currentRight > maxRange + Number(blockSize)) return;
|
||
|
||
Promise.all([getRect(this, '#leftDot'), getRect(this, '#rightDot')]).then(([leftDot, rightDot]) => {
|
||
const pageScrollTop = this.pageScrollTop || 0;
|
||
// 点击处-halfblock 与 leftDot左侧的距离（绝对值）
|
||
const leftDotPosition = vertical ? leftDot.top + pageScrollTop : leftDot.left;
|
||
const distanceLeft = Math.abs(pagePosition - leftDotPosition - halfBlock);
|
||
// 点击处-halfblock 与 rightDot左侧的距离（绝对值）
|
||
const rightDotPosition = vertical ? rightDot.top + pageScrollTop : rightDot.left;
|
||
const distanceRight = Math.abs(rightDotPosition - pagePosition + halfBlock);
|
||
// 哪个绝对值小就移动哪个Dot
|
||
const isMoveLeft = distanceLeft < distanceRight;
|
||
|
||
let offset = 0;
|
||
if ((theme) === 'capsule') {
|
||
offset = Number(blockSize);
|
||
if (vertical) {
|
||
offset *= 2;
|
||
}
|
||
offset += 6;
|
||
} else if (vertical) {
|
||
offset = Number(blockSize);
|
||
}
|
||
|
||
if (isMoveLeft) {
|
||
// 当前leftdot中心 + 左侧偏移量 = 目标左侧中心距离
|
||
const left = pagePosition - initialLeft - offset;
|
||
const leftValue = this.convertPosToValue(left, 0);
|
||
this.triggerValue([this.stepValue(leftValue), this._value[1]]);
|
||
} else {
|
||
let right = -(pagePosition - initialRight);
|
||
if (vertical) {
|
||
right += offset / 2;
|
||
}
|
||
const rightValue = this.convertPosToValue(right, 1);
|
||
|
||
this.triggerValue([this._value[0], this.stepValue(rightValue)]);
|
||
}
|
||
});
|
||
},
|
||
|
||
async onTouchStart(e) {
|
||
await this.getInitialInfo();
|
||
this.$emit('dragstart', { e });
|
||
const [touch] = e.changedTouches;
|
||
if (e.currentTarget.id === 'rightDot') {
|
||
this.identifier[1] = touch.identifier;
|
||
} else {
|
||
this.identifier[0] = touch.identifier;
|
||
}
|
||
},
|
||
|
||
onTouchMoveLeft(e) {
|
||
const { disabled, theme } = this;
|
||
const { initialLeft, _value, blockSize } = this;
|
||
if (disabled) return;
|
||
|
||
const touch = e.changedTouches.find(item => item.identifier === this.identifier[0]);
|
||
if (!touch) return;
|
||
const pagePosition = this.getPagePosition(touch);
|
||
let offset = 0;
|
||
if ((theme) === 'capsule') {
|
||
offset = Number(blockSize) + 3;
|
||
}
|
||
const currentLeft = pagePosition - initialLeft - offset;
|
||
|
||
const newData = [...(_value)];
|
||
const leftValue = this.convertPosToValue(currentLeft, 0);
|
||
|
||
newData[0] = this.stepValue(leftValue);
|
||
|
||
this.triggerValue(newData);
|
||
},
|
||
|
||
onTouchMoveRight(e) {
|
||
const { disabled, vertical, theme } = this;
|
||
const { initialRight, _value } = this;
|
||
if (disabled) return;
|
||
|
||
const touch = e.changedTouches.find(item => item.identifier === this.identifier[1]);
|
||
if (!touch) return;
|
||
|
||
const pagePosition = this.getPagePosition(touch);
|
||
let offset = 0;
|
||
if ((theme) === 'capsule') {
|
||
offset -= 3;
|
||
} else if (vertical) {
|
||
}
|
||
const currentRight = -(pagePosition - initialRight - offset);
|
||
|
||
const newData = [...(_value)];
|
||
const rightValue = this.convertPosToValue(currentRight, 1);
|
||
newData[1] = this.stepValue(rightValue);
|
||
|
||
this.triggerValue(newData);
|
||
},
|
||
|
||
setLineStyle(left, right) {
|
||
const { theme } = this;
|
||
const { blockSize, maxRange } = this;
|
||
const halfBlock = (theme) === 'capsule' ? Number(blockSize) / 2 : 0;
|
||
const [a, b] = this._value ;
|
||
const cut = v => parseInt(v, 10);
|
||
|
||
this.dotTopValue = [a, b];
|
||
this.realLabel = [this.getLabelByValue(a, 'start'), this.getLabelByValue(b, 'end')];
|
||
|
||
if (left + right <= maxRange) {
|
||
this.lineLeft = cut(left + halfBlock);
|
||
this.lineRight = cut(right + halfBlock);
|
||
} else {
|
||
this.lineLeft = cut(maxRange + halfBlock - right);
|
||
this.lineRight = cut(maxRange - left + halfBlock * 1.5);
|
||
}
|
||
},
|
||
|
||
onTouchEnd(e) {
|
||
this.$emit('dragend', { e, value: this._value });
|
||
if (e.currentTarget.id === 'rightDot') {
|
||
this.identifier[1] = -1;
|
||
} else {
|
||
this.identifier[0] = -1;
|
||
}
|
||
},
|
||
|
||
getPagePosition(touch) {
|
||
const { clientX, clientY } = touch;
|
||
const { vertical } = this;
|
||
return vertical ? clientY : clientX;
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
<style scoped>
|
||
@import './slider.css';
|
||
</style>
|