docs(Message): 增加自定义消息内容点击即可关闭的实例

WeBankFinTech · Oct 15, 2024 · dd60cf0 · dd60cf0
1 parent a8c4c1d
commit dd60cf0
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/docs/.vitepress/components/message/content.vue b/docs/.vitepress/components/message/content.vue
@@ -1,6 +1,7 @@
 <template>
     <FSpace ref="wrapRef">
         <FButton @click="handleCustomContent">自定义内容</FButton>
+        <FButton @click="handleClosableContent">消息内容点击即可关闭</FButton>
     </FSpace>
 </template>
 
@@ -25,9 +26,24 @@ export default {
             });
         }
 
+        function handleClosableContent() {
+            let messageInfo;
+            function handleCloseMessage() {
+                messageInfo?.destroy();
+            }
+
+            messageInfo = FMessage.warning({
+                duration: 10,
+                closable: true,
+                content: () => <div style={{ cursor: 'pointer' }} onClick={handleCloseMessage}>点击消息即可关闭</div>,
+                icon: () => <BellOffOutlined />,
+            });
+        }
+
         return {
             wrapRef,
             handleCustomContent,
+            handleClosableContent,
         };
     },
 };