白色主题

miniprogram_npm/tdesign-miniprogram/slider/slider.js

@@ -18,12 +18,14 @@ import config from '../common/config';
 import { trimSingleValue, trimValue } from './tool';
 import props from './props';
 import { getRect } from '../common/utils';
+import Bus from '../common/bus';
 const { prefix } = config;
 const name = `${prefix}-slider`;
 let Slider = class Slider extends SuperComponent {
     constructor() {
         super(...arguments);
         this.externalClasses = [
+            'class',
             `${prefix}-class`,
             `${prefix}-class-bar`,
             `${prefix}-class-bar-active`,
@@ -72,10 +74,18 @@ let Slider = class Slider extends SuperComponent {
                 }
             },
             marks(val) {
-                this.handleMask(val);
+                if (this.data.initialLeft != null) {
+                    this.handleMask(val);
+                }
+                else {
+                    this.bus.on('initial', () => this.handleMask(val));
+                }
             },
         };
         this.lifetimes = {
+            created() {
+                this.bus = new Bus();
+            },
             attached() {
                 const { value } = this.properties;
                 if (!value)
@@ -103,10 +113,19 @@ let Slider = class Slider extends SuperComponent {
         setValueAndTrigger();
     }
     handleMask(marks) {
+        const calcPos = (arr) => {
+            const { theme } = this.properties;
+            const { blockSize, maxRange } = this.data;
+            const margin = theme === 'capsule' ? blockSize / 2 : 0;
+            return arr.map((item) => ({
+                val: item,
+                left: Math.round((item / 100) * maxRange) + margin,
+            }));
+        };
         if ((marks === null || marks === void 0 ? void 0 : marks.length) && Array.isArray(marks)) {
             this.setData({
                 isScale: true,
-                scaleArray: marks,
+                scaleArray: calcPos(marks),
                 scaleTextArray: [],
             });
         }
@@ -115,16 +134,17 @@ let Slider = class Slider extends SuperComponent {
             const scaleTextArray = scaleArray.map((item) => marks[item]);
             this.setData({
                 isScale: scaleArray.length > 0,
-                scaleArray,
+                scaleArray: calcPos(scaleArray),
                 scaleTextArray,
             });
         }
     }
     setSingleBarWidth(value) {
-        const { max, min } = this.properties;
+        const { max, min, theme } = this.properties;
         const { maxRange, blockSize } = this.data;
+        const halfBlock = theme === 'capsule' ? Number(blockSize) / 2 : 0;
         const percentage = (Number(value) - Number(min)) / (Number(max) - Number(min));
-        const width = percentage * maxRange + blockSize / 2;
+        const width = percentage * maxRange + halfBlock;
         this.setData({
             lineBarWidth: `${width}px`,
         });
@@ -135,12 +155,20 @@ let Slider = class Slider extends SuperComponent {
             const { blockSize } = this.data;
             const { theme } = this.properties;
             const halfBlock = Number(blockSize) / 2;
-            const margin = theme === 'capsule' ? 6 : 0;
+            let maxRange = line.right - line.left;
+            let initialLeft = line.left;
+            let initialRight = line.right;
+            if (theme === 'capsule') {
+                maxRange = maxRange - Number(blockSize) - 6;
+                initialLeft -= halfBlock;
+                initialRight -= halfBlock;
+            }
             this.setData({
-                maxRange: line.right - line.left - Number(blockSize) - margin,
-                initialLeft: line.left + halfBlock,
-                initialRight: line.right - halfBlock,
+                maxRange,
+                initialLeft,
+                initialRight,
             });
+            this.bus.emit('initial');
         });
     }
     stepValue(value) {
@@ -183,13 +211,13 @@ let Slider = class Slider extends SuperComponent {
             : Number(max) - (posValue / maxRange) * (Number(max) - Number(min));
     }
     onLineTap(e) {
-        const { disabled } = this.properties;
+        const { disabled, theme } = this.properties;
         const { initialLeft, initialRight, maxRange, blockSize } = this.data;
         if (disabled)
             return;
         const [touch] = e.changedTouches;
         const { pageX } = touch;
-        const halfBlock = Number(blockSize) / 2;
+        const halfBlock = theme === 'capsule' ? Number(blockSize) / 2 : 0;
         const currentLeft = pageX - initialLeft;
         if (currentLeft < 0 || currentLeft > maxRange + Number(blockSize))
             return;
@@ -236,8 +264,9 @@ let Slider = class Slider extends SuperComponent {
         this.triggerValue(newData);
     }
     setLineStyle(left, right) {
+        const { theme } = this.properties;
         const { blockSize, maxRange } = this.data;
-        const halfBlock = Number(blockSize) / 2;
+        const halfBlock = theme === 'capsule' ? Number(blockSize) / 2 : 0;
         const [a, b] = this.data._value;
         const cut = (v) => parseInt(v, 10);
         this.setData({