fix(slider): enable async render (#2115)

Tencent · Jun 20, 2023 · 6092abb · 6092abb
1 parent d8324c3
commit 6092abb
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 29 deletions.
diff --git a/src/common/bus.ts b/src/common/bus.ts
@@ -1,11 +1,17 @@
 export default class Bus {
   listeners: Map<string, any>;
+  emited: Set<string>;
 
   constructor() {
     this.listeners = new Map();
+    this.emited = new Set();
   }
 
   on(evtName: string, listener) {
+    if (this.emited.has(evtName)) {
+      listener();
+      return;
+    }
     const target = this.listeners.get(evtName) || [];
 
     target.push(listener);
@@ -18,6 +24,7 @@ export default class Bus {
 
     if (listeners) {
       listeners.forEach((func) => func());
+      this.emited.add(evtName);
     }
   }
 }
diff --git a/src/slider/README.md b/src/slider/README.md
@@ -80,4 +80,14 @@ dragstart | \- | 开始拖动时触发
 
 ## FAQ
 
-当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `getInitialStyle` 方法，才能正常渲染。
+当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `init` 方法，才能正常渲染。如下：
+
+```html
+<t-slider id="slider" />
+```
+
+```js
+const $slider = this.selectComponent('#slider');
+
+$slider.init();
+```
diff --git a/src/slider/slider.ts b/src/slider/slider.ts
@@ -79,33 +79,11 @@ export default class Slider extends SuperComponent {
       this.handlePropsChange(newValue);
     },
     _value(newValue: SliderValue) {
-      const { min, max, range } = this.properties;
-      const { maxRange } = this.data;
-
-      if (range) {
-        const left = (maxRange * (newValue[0] - Number(min))) / (Number(max) - Number(min));
-        const right = (maxRange * (Number(max) - newValue[1])) / (Number(max) - Number(min));
-        // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
-        this.setLineStyle(left, right);
-      } else {
-        this.setSingleBarWidth(newValue as number);
-      }
-
-      this.setData({
-        isVisibleToScreenReader: true,
-      });
-      setTimeout(() => {
-        this.setData({
-          isVisibleToScreenReader: false,
-        });
-      }, 2e3);
+      this.bus.on('initial', () => this.renderLine(newValue));
+      this.toggleA11yTips();
     },
     marks(val) {
-      if (this.data.initialLeft != null) {
-        this.handleMark(val);
-      } else {
-        this.bus.on('initial', () => this.handleMark(val));
-      }
+      this.bus.on('initial', () => this.handleMark(val));
     },
   };
 
@@ -116,10 +94,35 @@ export default class Slider extends SuperComponent {
     attached() {
       const { value } = this.properties;
       if (!value) this.handlePropsChange(0);
-      this.getInitialStyle();
+      this.init();
     },
   };
 
+  toggleA11yTips() {
+    this.setData({
+      isVisibleToScreenReader: true,
+    });
+    setTimeout(() => {
+      this.setData({
+        isVisibleToScreenReader: false,
+      });
+    }, 2000);
+  }
+
+  renderLine(val) {
+    const { min, max, range } = this.properties;
+    const { maxRange } = this.data;
+
+    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 as number);
+    }
+  }
+
   triggerValue(value?: SliderValue) {
     if (this.preval === value) return;
     this.preval = value;
@@ -139,7 +142,7 @@ export default class Slider extends SuperComponent {
 
     // 基本样式未初始化，等待初始化后在改变数据。
     if (this.data.maxRange === 0) {
-      this.getInitialStyle().then(setValueAndTrigger);
+      this.init().then(setValueAndTrigger);
       return;
     }
 
@@ -189,7 +192,7 @@ export default class Slider extends SuperComponent {
     });
   }
 
-  async getInitialStyle() {
+  async init() {
     const line: boundingClientRect = await getRect(this, '#sliderLine');
     const { blockSize } = this.data;
     const { theme } = this.properties;
@@ -198,6 +201,8 @@ export default class Slider extends SuperComponent {
     let initialLeft = line.left;
     let initialRight = line.right;
 
+    if (initialLeft === 0 && initialRight === 0) return;
+
     if ((theme as any) === 'capsule') {
       maxRange = maxRange - Number(blockSize) - 6; // 6 是边框宽度
       initialLeft -= halfBlock;