feat(t-message): 支持同时显示多条消息并自动垂直排版

src/message/README.en-US.md

@@ -18,6 +18,8 @@ theme | String | info | options：info/success/warning/error。Typescript：`Mes
 visible | Boolean | false | \- | N
 default-visible | Boolean | false | uncontrolled property | N
 z-index | Number | 15000 | \- | N
+single | Boolean | false | Whether to display only one message. Note that when single=false, the three categories of link, scroll, and close will not be covered.| N
+gap | String | 12 | The spacing between two messages, default 12px. Example: '12', '12px', '18rpx' | N
 
 ### Message Events
 

src/message/README.md

@@ -58,6 +58,8 @@ visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N
 default-visible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
 z-index | Number | 15000 | 元素层级，样式默认为 15000 | N
 link | String / Object / Slot | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。 | N
+single | Boolean | false | 是否仅显示一条消息。注意 single=false 时带链接、滚动、带关闭此三类不会被覆盖 | N
+gap | String | 12 | 两条消息之间的间距，默认12px。示例：'12', '12px', '18rpx' | N
 ### Message Events
 
 名称 | 参数 | 描述

src/message/__test__/__snapshots__/demo.test.js.snap

@@ -58,6 +58,16 @@ exports[`Message Message base demo works fine 1`] = `
     >
       带按钮的通知
     </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showSingleMessage"
+    >
+      纯文字的通知单例
+    </t-button>
   </wx-view>
 </base>
 `;

src/message/__test__/__snapshots__/index.test.js.snap

@@ -5,95 +5,78 @@ exports[`message props : style && customStyle 1`] = `
   <t-message
     id="t-message"
   >
-    <wx-view
-      animation="{{
-        Object {
-          "actions": Array [
-            Object {
-              "animates": Array [
-                Object {
-                  "args": Array [
-                    66,
-                  ],
-                  "type": "translateY",
-                },
-              ],
-              "option": Object {
-                "transformOrigin": "50% 50% 0",
-                "transition": Object {
-                  "delay": 0,
-                  "duration": 500,
-                  "timingFunction": "ease",
-                },
-              },
-            },
-          ],
-        }
-      }}"
-      ariaRole="alert"
-      class="t-message class t-class t-message--warning"
-      id="t-message"
-      style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
+    <t-message-item
+      id="t-message_0"
+      bind:close-btn-click="handleClose"
+      bind:link-click="handleLinkClick"
     >
       <wx-view
-        class="t-message__icon--left"
-      >
-        <t-icon
-          class=""
-          tClass="t-class-icon"
-          bind:click=""
-        >
-          <wx-view
-            ariaHidden="{{true}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-info-circle-filled t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
-      </wx-view>
-      <wx-view
-        class="t-message__text-wrap "
-        id="t-message__text-wrap"
-        style="text-align: left"
+        animation="{{Array []}}"
+        ariaRole="alert"
+        class="t-message class t-class t-message--warning "
+        id="t-message_0"
+        style="z-index:15000;top:20px;right:32rpx;left:32rpx; color: red; font-size: 9px;"
       >
         <wx-view
-          animation="{{Array []}}"
-          class="t-message__text t-class-content"
-          id="t-message__text"
+          class="t-message__icon--left"
         >
-          这是一条带关闭的消息通知
+          <t-icon
+            class=""
+            tClass="t-class-icon"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{true}}"
+              ariaLabel=""
+              ariaRole=""
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-info-circle-filled t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
         </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-message__icon--right"
-        bind:tap="handleClose"
-      >
-        <t-icon
-          class=""
-          tClass="t-class-close-btn"
-          bind:click=""
+        <wx-view
+          class="t-message__text-wrap "
+          id="t-message__text-wrap"
+          style="text-align: left"
         >
           <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel="关闭"
-            ariaRole="button"
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
+            animation="{{Array []}}"
+            class="t-message__text t-class-content"
+            id="t-message__text"
           >
-            <wx-label
-              class="t-icon-close t-icon-base"
-            />
+            这是一条带关闭的消息通知
           </wx-view>
-        </t-icon>
+        </wx-view>
+        <wx-view
+          class="t-message__icon--right"
+          bind:tap="handleClose"
+        >
+          <t-icon
+            class=""
+            tClass="t-class-close-btn"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel="关闭"
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-close t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
+        </wx-view>
       </wx-view>
-    </wx-view>
+    </t-message-item>
   </t-message>
 </main>
 `;

src/message/__test__/index.test.js

@@ -180,4 +180,43 @@ describe('message', () => {
       Message.hide();
     });
   });
+
+  describe('multiple', () => {
+    it(': message-count-gap', async () => {
+      const id = simulate.load({
+        template: `<t-message id="t-message" ></t-message>`,
+        usingComponents: {
+          't-message': message,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      const $message = comp.querySelector('#t-message');
+
+      mockInstance.mockImplementation(() => $message.instance);
+      Message.hide();
+      const showMessageFn = async (i) => {
+        Message.info({
+          context: $message.instance,
+          offset: [20, 32],
+          content: `这是第${i}条消息通知`,
+          duration: -1,
+          gap: '16',
+        });
+      };
+      showMessageFn('1');
+      await simulate.sleep(550);
+      showMessageFn('2');
+      await simulate.sleep(550);
+      showMessageFn('3');
+      await simulate.sleep(550);
+      const $messageItems = comp.querySelectorAll('#t-message >>> .t-message');
+      expect($messageItems.length).toBe(3);
+      if ($messageItems.length === 3) {
+        const top = 20 + (46 + 16) * 2;
+        expect($messageItems[2].dom.getAttribute('style').includes(`top:${top}px;`)).toBeTruthy();
+      }
+    });
+  });
 });

src/message/_example/base/index.js

@@ -63,5 +63,15 @@ Component({
         },
       });
     },
+    showSingleMessage() {
+      Message.info({
+        context: this,
+        offset: [20, 32],
+        duration: 5000,
+        icon: false,
+        content: '这是一条纯文字的消息通知且仅显示一条',
+        single: true,
+      });
+    },
   },
 });

src/message/_example/base/index.wxml

@@ -20,4 +20,8 @@
   <t-button t-class="external-class" theme="primary" variant="outline" size="large" block bind:tap="showBtnMessage"
     >带按钮的通知</t-button
   >
+
+  <t-button t-class="external-class" theme="primary" variant="outline" size="large" block bind:tap="showSingleMessage"
+    >纯文字的通知单例</t-button
+  >
 </view>

src/message/index.ts

@@ -13,10 +13,7 @@ const showMessage = function (options: MessageActionOptionsType, theme: MessageT
   const instance = getInstance(context, selector);
 
   if (instance) {
-    instance.resetData(() => {
-      instance.setData({ theme, ...otherOptions }, instance.show.bind(instance));
-    });
-
+    instance.setMessage(otherOptions, theme);
     return instance;
   }
   console.error('未找到组件,请确认 selector && context 是否正确');

src/message/message-item/index.ts

@@ -0,0 +1,46 @@
+import { MessageType, MessageProps } from '../message.interface';
+import { getInstance } from '../../common/utils';
+
+type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+
+interface MessageActionOptionsType extends Optional<MessageProps> {
+  context?: Context;
+  selector?: string;
+}
+
+const showMessage = function (options: MessageActionOptionsType, theme: MessageType = MessageType.info) {
+  const { context, selector = '#t-message', ...otherOptions } = options;
+  const instance = getInstance(context, selector);
+
+  if (instance) {
+    instance.resetData(() => {
+      instance.setData({ theme, ...otherOptions }, instance.show.bind(instance));
+    });
+
+    return instance;
+  }
+  console.error('未找到组件,请确认 selector && context 是否正确');
+};
+
+export default {
+  info(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.info);
+  },
+  success(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.success);
+  },
+  warning(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.warning);
+  },
+  error(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.error);
+  },
+  hide(options: MessageActionOptionsType) {
+    const { context, selector = '#t-message' } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) {
+      return;
+    }
+    instance.hide();
+  },
+};

src/message/message-item/message.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../../icon/icon",
+    "t-link": "../../link/link"
+  }
+}

src/message/message.less → src/message/message-item/message.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../../common/style/index.less';
 
 @message-height: 96rpx;
 @message-horizontal-padding: 32rpx;
@@ -26,6 +26,7 @@
   top: 0;
   left: 0;
   right: 0;
+  transition: opacity 0.3s, transform 0.4s, top 0.4s;
   display: flex;
   justify-content: @message-align;
   height: @message-height;
@@ -90,4 +91,8 @@
     flex: 0 0 auto;
     margin-left: @spacer;
   }
+  &__fade {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
 }