fix(Message): 修复message重复进入位置异常 (#2711)

Tencent · Apr 22, 2024 · ec78990 · ec78990
1 parent 155504c
commit ec78990
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/src/message/_example/base/index.js b/src/message/_example/base/index.js
@@ -66,7 +66,7 @@ Component({
     showSingleMessage() {
       Message.info({
         context: this,
-        offset: [20, 32],
+        offset: [90, 32],
         duration: 5000,
         icon: false,
         content: '这是一条纯文字的消息通知且仅显示一条',

diff --git a/src/message/message-item/message.ts b/src/message/message-item/message.ts
@@ -44,6 +44,9 @@ export default class Message extends SuperComponent {
     fadeClass: '',
   };
 
+  // 延时关闭句柄
+  closeTimeoutContext = 0;
+
   observers = {
     marquee(val) {
       if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') {
@@ -101,6 +104,7 @@ export default class Message extends SuperComponent {
       fadeClass: `${name}__fade`,
       wrapTop: unitConvert(offset[0]) + offsetHeight,
     });
+    this.reset();
     if (duration && duration > 0) {
       this.closeTimeoutContext = setTimeout(() => {
         this.hide();
@@ -118,6 +122,7 @@ export default class Message extends SuperComponent {
   }
 
   hide() {
+    this.reset();
     this.setData({
       fadeClass: `${name}__fade`,
     });
@@ -129,6 +134,12 @@ export default class Message extends SuperComponent {
     }
   }
 
+  // 重置定时器
+  reset() {
+    clearTimeout(this.closeTimeoutContext);
+    this.closeTimeoutContext = 0;
+  }
+
   handleClose() {
     this.hide();
     this.triggerEvent('close-btn-click');

diff --git a/src/message/message.ts b/src/message/message.ts
@@ -8,9 +8,6 @@ import { unitConvert } from '../common/utils';
 const SHOW_DURATION = 400;
 const { prefix } = config;
 const name = `${prefix}-message`;
-let index = 0;
-const instances = [];
-let gap = 12; // 两条message之间的间距，单位px
 
 @wxComponent()
 export default class Message extends SuperComponent {
@@ -28,6 +25,13 @@ export default class Message extends SuperComponent {
     messageList: [],
   };
 
+  index = 0;
+
+  instances = [];
+
+  // 两条message之间的间距，单位px
+  gap = 12;
+
   observers = {};
 
   pageLifetimes = {
@@ -56,23 +60,23 @@ export default class Message extends SuperComponent {
    * @param theme
    */
   setMessage(msg: MessageProps, theme: MessageType = MessageType.info) {
-    let id = `${name}_${index}`;
+    let id = `${name}_${this.index}`;
     if (msg.single) {
       id = name;
     }
-    gap = unitConvert(msg.gap || gap);
+    this.gap = unitConvert(msg.gap || this.gap);
     const msgObj = {
       ...msg,
       theme,
       id,
-      gap,
+      gap: this.gap,
     };
-    const instanceIndex = instances.findIndex((x) => x.id === id);
+    const instanceIndex = this.instances.findIndex((x) => x.id === id);
     if (instanceIndex < 0) {
       this.addMessage(msgObj);
     } else {
       // 更新消息
-      const instance = instances[instanceIndex];
+      const instance = this.instances[instanceIndex];
       const offsetHeight = this.getOffsetHeight(instanceIndex);
       instance.resetData(() => {
         instance.setData(msgObj, instance.show.bind(instance, offsetHeight));
@@ -96,9 +100,9 @@ export default class Message extends SuperComponent {
       () => {
         const offsetHeight = this.getOffsetHeight();
         const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
-        if (instances) {
-          instances.push(instance);
-          index += 1;
+        if (this.instances) {
+          this.instances.push(instance);
+          this.index += 1;
         }
       },
     );
@@ -112,11 +116,11 @@ export default class Message extends SuperComponent {
   getOffsetHeight(index: number = -1) {
     let offsetHeight = 0;
     let len = index;
-    if (len === -1 || len > instances.length) {
-      len = instances.length;
+    if (len === -1 || len > this.instances.length) {
+      len = this.instances.length;
     }
     for (let i = 0; i < len; i += 1) {
-      const instance = instances[i];
+      const instance = this.instances[i];
       offsetHeight += instance.data.height + instance.data.gap;
     }
     return offsetHeight;
@@ -159,7 +163,7 @@ export default class Message extends SuperComponent {
     if (!id) {
       this.hideAll();
     }
-    const instance = instances.find((x) => x.id === id);
+    const instance = this.instances.find((x) => x.id === id);
     if (instance) {
       instance.hide();
     }
@@ -170,8 +174,8 @@ export default class Message extends SuperComponent {
    */
   hideAll() {
     // 消息移除后也会移除instance，下标不用增加，直至全部删除
-    for (let i = 0; i < instances.length; ) {
-      const instance = instances[i];
+    for (let i = 0; i < this.instances.length; ) {
+      const instance = this.instances[i];
       instance.hide();
     }
   }
@@ -180,13 +184,13 @@ export default class Message extends SuperComponent {
    * 移除message实例
    */
   removeInstance(id) {
-    const index = instances.findIndex((x) => x.id === id);
+    const index = this.instances.findIndex((x) => x.id === id);
     if (index < 0) return;
-    const instance = instances[index];
+    const instance = this.instances[index];
     const removedHeight = instance.data.height;
-    instances.splice(index, 1);
-    for (let i = index; i < instances.length; i += 1) {
-      const instance = instances[i];
+    this.instances.splice(index, 1);
+    for (let i = index; i < this.instances.length; i += 1) {
+      const instance = this.instances[i];
       instance.setData({
         wrapTop: instance.data.wrapTop - removedHeight - instance.data.gap,
       });