@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/slider/slider.vue

@@ -1,17 +1,15 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
-    :class="
-      tools.cls(classPrefix, [
-        ['top', label || scaleTextArray.length],
-        ['disabled', disabled],
-        ['range', range]
-      ]) +
-        '  ' +
-        tClass +
-        ' ' +
-        (vertical ? classPrefix + '--vertical' : '')
-    "
+    :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
@@ -22,7 +20,7 @@
       </text>
       <view
         id="sliderLine"
-        :class="tools.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']]) + ' ' + tClassBar"
+        :class="'' + tools.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']]) + ' ' + tClassBar"
         @click="onSingleLineTap"
       >
         <block v-if="isScale">
@@ -30,7 +28,7 @@
             v-for="(item, index) in scaleArray"
             :key="index"
             :class="
-              tools.cls(classPrefix + '__scale-item', [
+              '' + tools.cls(classPrefix + '__scale-item', [
                 ['active', innerValue >= item.val],
                 ['disabled', disabled],
                 theme,
@@ -42,14 +40,14 @@
           >
             <view
               v-if="scaleTextArray.length"
-              :class="tools.cls(classPrefix + '__scale-desc', [theme])"
+              :class="'' + tools.cls(classPrefix + '__scale-desc', [theme])"
             >
               {{ scaleTextArray[index] }}
             </view>
           </view>
         </block>
         <view
-          :class="tools.cls(classPrefix + '__line', [['disabled', disabled], theme, 'single']) + ' ' + tClassBarActive"
+          :class="'' + tools.cls(classPrefix + '__line', [['disabled', disabled], theme, 'single']) + ' ' + tClassBarActive"
           :style="(vertical ? 'height' : 'width') + ': ' + lineBarWidth"
         >
           <view
@@ -62,7 +60,7 @@
           >
             <view
               v-if="label || isVisibleToScreenReader"
-              :class="tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
+              :class="'' + tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
               aria-role="alert"
               aria-live="assertive"
               :aria-hidden="!isVisibleToScreenReader"
@@ -97,7 +95,7 @@
       </view>
       <view
         id="sliderLine"
-        :class="tools.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']]) + ' ' + tClassBar"
+        :class="'' + tools.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']]) + ' ' + tClassBar"
         @click="onLineTap"
       >
         <block v-if="isScale">
@@ -105,7 +103,7 @@
             v-for="(item, index) in scaleArray"
             :key="index"
             :class="
-              tools.cls(classPrefix + '__scale-item', [
+              '' + tools.cls(classPrefix + '__scale-item', [
                 ['active', dotTopValue[1] >= item.val && item.val >= dotTopValue[0]],
                 ['disabled', disabled],
                 theme,
@@ -117,14 +115,14 @@
           >
             <view
               v-if="scaleTextArray.length"
-              :class="tools.cls(classPrefix + '__scale-desc', [theme])"
+              :class="'' + tools.cls(classPrefix + '__scale-desc', [theme])"
             >
               {{ scaleTextArray[index] }}
             </view>
           </view>
         </block>
         <view
-          :class="tools.cls(classPrefix + '__line', [['disabled', disabled], theme]) + ' ' + tClassBarActive"
+          :class="'' + tools.cls(classPrefix + '__line', [['disabled', disabled], theme]) + ' ' + tClassBarActive"
           :style="(vertical ? 'top' : 'left') + ': ' + lineLeft + 'px; ' + (vertical ? 'bottom' : 'right') + ': ' + lineRight + 'px'"
         >
           <view
@@ -137,7 +135,7 @@
           >
             <view
               v-if="label || isVisibleToScreenReader"
-              :class="tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
+              :class="'' + tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
               aria-role="alert"
               aria-live="assertive"
               :aria-hidden="!isVisibleToScreenReader"
@@ -164,7 +162,7 @@
           >
             <view
               v-if="label || isVisibleToScreenReader"
-              :class="tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
+              :class="'' + tools.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
               aria-role="alert"
               aria-live="assertive"
               :aria-hidden="!isVisibleToScreenReader"
@@ -206,354 +204,355 @@ import { isString, isFunction } from '../common/validator';
 
 const name = `${prefix}-slider`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'value',
-      event: 'change',
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-  ],
-  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],
-      innerValue: 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);
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
       },
-      // immediate: true,
-      deep: true,
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-bar`,
+      `${prefix}-class-bar-active`,
+      `${prefix}-class-bar-disabled`,
+      `${prefix}-class-cursor`,
+    ],
+    props: {
+      ...props,
     },
-    innerValue: {
-      handler(newValue) {
-        this.bus.on('initial', () => this.renderLine(newValue));
-        this.toggleA11yTips();
-      },
-      // immediate: true,
-      deep: true,
+    data() {
+      return {
+      // 按钮样式列表
+        sliderStyles: '',
+        classPrefix: name,
+        initialLeft: null,
+        initialRight: null,
+        activeLeft: 0,
+        activeRight: 0,
+        maxRange: 0,
+        lineLeft: 0,
+        lineRight: 0,
+        dotTopValue: [0, 0],
+        innerValue: 0,
+        blockSize: 20,
+        isScale: false,
+        scaleArray: [],
+        scaleTextArray: [],
+        prefix,
+        realLabel: '',
+        extremeLabel: [],
+        isVisibleToScreenReader: false,
+        identifier: [-1, -1],
+        __inited: false,
+        tools,
+
+        lineBarWidth: 0,
+      };
     },
-    marks: {
-      handler(val) {
-        this.bus.on('initial', () => this.handleMark(val));
+    watch: {
+      value: {
+        handler(newValue) {
+          this.handlePropsChange(newValue);
+        },
+        // immediate: true,
+        deep: true,
       },
-      // immediate: true,
-      deep: true,
-    },
-    label: {
-      handler(val) {
-        this.isShowLabel = Boolean(val);
+      innerValue: {
+        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,
       },
-      immediate: true,
+      label: {
+        handler(val) {
+          this.isShowLabel = Boolean(val);
+        },
+        immediate: true,
+      },
+      showExtremeValue: 'getwExtremeLabel',
+      min: 'getwExtremeLabel',
+      max: 'getwExtremeLabel',
     },
-    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.innerValue);
+    created() {
+      this.bus = new Bus();
+      this.bus.on('initial', () => this.handleMark(this.marks));
+      this.bus.on('initial', () => {
+        nextTick().then(() => {
+          this.renderLine(this.innerValue);
+        });
       });
-    });
-    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')];
+      this.toggleA11yTips();
     },
-    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);
-      };
+    mounted() {
+      const { value, defaultValue } = this;
+      // if (!value)
+      this.handlePropsChange(coalesce(value, defaultValue, 0));
+      this.init();
+      this.injectPageScroll();
     },
 
-    observerScrollTop(rest) {
-      const { scrollTop } = rest || {};
-      this.pageScrollTop = scrollTop;
-    },
+    methods: {
+      getValue,
+      getwExtremeLabel() {
+        const { showExtremeValue, min, max } = this;
+        if (!showExtremeValue) return;
 
-    toggleA11yTips() {
-      this.isVisibleToScreenReader = true;
+        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);
+        };
+      },
 
-      setTimeout(() => {
-        this.isVisibleToScreenReader = false;
-      }, 2000);
-    },
+      observerScrollTop(rest) {
+        const { scrollTop } = rest || {};
+        this.pageScrollTop = scrollTop;
+      },
 
-    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);
-      }
-    },
+      toggleA11yTips() {
+        this.isVisibleToScreenReader = true;
 
-    triggerValue(value) {
-      const { min, max, range } = this;
-      const trimmedValue = trimValue(value, {
-        min, max, range,
-      });
+        setTimeout(() => {
+          this.isVisibleToScreenReader = false;
+        }, 2000);
+      },
 
-      if (JSON.stringify(this.preval) === JSON.stringify(trimmedValue)) return;
-      this.preval = value;
+      renderLine(val) {
+        const { min, max, range } = this;
+        const { maxRange } = this;
 
-      this._trigger('change', {
-        value: trimmedValue,
-      });
-      if (this._selfControlled) {
-        this.innerValue = trimmedValue;
-      }
-    },
+        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);
+        }
+      },
 
-    getLabelByValue(value, position) {
-      const { label } = this;
+      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.innerValue = 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) {
 
-      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 text;
-      }
 
-      if (isFunction(label)) {
-        return label(value, position);
-      }
+        return String(value);
+      },
 
-      return String(value);
-    },
+      handlePropsChange(newValue) {
+        const { min, max, range } = this;
 
-    handlePropsChange(newValue) {
-      const { min, max, range } = this;
+        const value = trimValue(newValue, {
+          min, max, range,
+        });
 
-      const value = trimValue(newValue, {
-        min, max, range,
-      });
+        const realLabel = this.getLabelByValue(value);
 
-      const realLabel = this.getLabelByValue(value);
+        // 避免受控模式下死循环，同时不影响初始化后的首次点击
+        if (this.preval !== undefined) {
+          this.preval = value;
+        }
 
-      // 避免受控模式下死循环，同时不影响初始化后的首次点击
-      if (this.preval !== undefined) {
-        this.preval = value;
-      }
+        const setValueAndTrigger = () => {
+          this.innerValue = value;
+          this.realLabel = realLabel;
+        };
 
-      const setValueAndTrigger = () => {
-        this.innerValue = value;
-        this.realLabel = realLabel;
-      };
+        // 基本样式未初始化，等待初始化后在改变数据。
+        if (this.maxRange === 0) {
+          this.init().then(setValueAndTrigger);
+          return;
+        }
 
-      // 基本样式未初始化，等待初始化后在改变数据。
-      if (this.maxRange === 0) {
-        this.init().then(setValueAndTrigger);
-        return;
-      }
+        setValueAndTrigger();
+      },
 
-      setValueAndTrigger();
-    },
+      valueToPosition(value) {
+        const { min, max, theme } = this;
+        const { blockSize, maxRange } = this;
+        const halfBlock = (theme) === 'capsule' ? Number(blockSize) / 2 : 0;
 
-    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;
+      },
 
-      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),
+        }));
 
-    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;
-      }
-    },
+        if (marks?.length && Array.isArray(marks)) {
+          this.isScale = true;
+          this.scaleArray = calcPos(marks);
+          this.scaleTextArray = [];
+        }
 
-    setSingleBarWidth(value) {
-      const width = this.valueToPosition(value);
+        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.lineBarWidth = `${width}px`;
-    },
+          this.isScale = scaleArray.length > 0;
+          this.scaleArray = calcPos(scaleArray);
+          this.scaleTextArray = scaleTextArray;
+        }
+      },
 
-    async init() {
-      if (this.__inited) return;
-      await this.getInitialInfo();
-      this.__inited = true;
-      this.bus.emit('initial');
-    },
+      setSingleBarWidth(value) {
+        const width = this.valueToPosition(value);
 
-    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;
-    },
+        this.lineBarWidth = `${width}px`;
+      },
 
-    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 init() {
+        if (this.__inited) return;
+        await this.getInitialInfo();
+        this.__inited = true;
+        this.bus.emit('initial');
+      },
 
-    // 点击滑动条的事件
-    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 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 getSingleChangeValue(e) {
+      // 点击滑动条的事件
+      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) {
+        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) {
         }
-        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);
-    },
 
-    /**
+        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 位置数据
@@ -561,157 +560,158 @@ export default uniComponent({
    * @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));
-    },
+      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;
+      // 点击范围选择滑动条的事件
+      onLineTap(e) {
+        const { disabled, theme, vertical } = this;
+        const { initialLeft, initialRight, maxRange, blockSize } = this;
+        if (disabled) return;
 
-        let offset = 0;
-        if ((theme) === 'capsule') {
-          offset = Number(blockSize);
-          if (vertical) {
-            offset *= 2;
+        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);
           }
-          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.innerValue[1]]);
-        } else {
-          let right = -(pagePosition - initialRight);
-          if (vertical) {
-            right += offset / 2;
+          if (isMoveLeft) {
+            // 当前leftdot中心 + 左侧偏移量 = 目标左侧中心距离
+            const left = pagePosition - initialLeft - offset;
+            const leftValue = this.convertPosToValue(left, 0);
+            this.triggerValue([this.stepValue(leftValue), this.innerValue[1]]);
+          } else {
+            let right = -(pagePosition - initialRight);
+            if (vertical) {
+              right += offset / 2;
+            }
+            const rightValue = this.convertPosToValue(right, 1);
+
+            this.triggerValue([this.innerValue[0], this.stepValue(rightValue)]);
           }
-          const rightValue = this.convertPosToValue(right, 1);
+        });
+      },
 
-          this.triggerValue([this.innerValue[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;
         }
-      });
-    },
+      },
 
-    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, innerValue, blockSize } = this;
+        if (disabled) return;
 
-    onTouchMoveLeft(e) {
-      const { disabled, theme } = this;
-      const { initialLeft, innerValue, 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 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 = [...(innerValue)];
+        const leftValue = this.convertPosToValue(currentLeft, 0);
 
-      const newData = [...(innerValue)];
-      const leftValue = this.convertPosToValue(currentLeft, 0);
+        newData[0] = this.stepValue(leftValue);
 
-      newData[0] = this.stepValue(leftValue);
+        this.triggerValue(newData);
+      },
 
-      this.triggerValue(newData);
-    },
+      onTouchMoveRight(e) {
+        const { disabled, vertical, theme } = this;
+        const { initialRight, innerValue } = this;
+        if (disabled) return;
 
-    onTouchMoveRight(e) {
-      const { disabled, vertical, theme } = this;
-      const { initialRight, innerValue } = this;
-      if (disabled) return;
+        const touch = e.changedTouches.find(item => item.identifier === this.identifier[1]);
+        if (!touch) 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 pagePosition = this.getPagePosition(touch);
-      let offset = 0;
-      if ((theme) === 'capsule') {
-        offset -= 3;
-      } else if (vertical) {
-      }
-      const currentRight = -(pagePosition - initialRight - offset);
+        const newData = [...(innerValue)];
+        const rightValue = this.convertPosToValue(currentRight, 1);
+        newData[1] = this.stepValue(rightValue);
 
-      const newData = [...(innerValue)];
-      const rightValue = this.convertPosToValue(currentRight, 1);
-      newData[1] = this.stepValue(rightValue);
+        this.triggerValue(newData);
+      },
 
-      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.innerValue ;
+        const cut = v => parseInt(v, 10);
 
-    setLineStyle(left, right) {
-      const { theme } = this;
-      const { blockSize, maxRange } = this;
-      const halfBlock = (theme) === 'capsule' ? Number(blockSize) / 2 : 0;
-      const [a, b] = this.innerValue ;
-      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);
-      }
-    },
+        this.dotTopValue = [a, b];
+        this.realLabel = [this.getLabelByValue(a, 'start'), this.getLabelByValue(b, 'end')];
 
-    onTouchEnd(e) {
-      this.$emit('dragend', { e, value: this.innerValue });
-      if (e.currentTarget.id === 'rightDot') {
-        this.identifier[1] = -1;
-      } else {
-        this.identifier[0] = -1;
-      }
-    },
+        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);
+        }
+      },
 
-    getPagePosition(touch) {
-      const { clientX, clientY } = touch;
-      const { vertical } = this;
-      return vertical ? clientY : clientX;
+      onTouchEnd(e) {
+        this.$emit('dragend', { e, value: this.innerValue });
+        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 src="./slider.css"></style>