雅安论坛

标题: 【Ant Design of Vue】可手动关闭Message 全局提示 [打印本页]
作者: 匿名    时间: 2023-10-3 19:34
标题: 【Ant Design of Vue】可手动关闭Message 全局提示
【Ant Design of Vue】可手动关闭Message 全局提示

将以下代码封装到 message.js 里
  1. // 实现Message全局提示可手动关闭
  2. import { message } from 'ant-design-vue';
  3. /*
  4.         h: 是content自带的参数，表示createElement
  5.         content：文本内容
  6. */
  7. const createElementVNode = (h, content) => {
  8.     // 延用的官方的文本内容及样式
  9.     const innerText = h('span', { style: { color: '#4a5970', fontSize: '14px' } }, content);
  10.     // 自定义关闭图标
  11.     const innerIcon = h('a-icon', {
  12.         style: { marginLeft: '10px', color: '#1890ff', cursor: 'pointer' },
  13.         attrs: { type: 'close-circle' },
  14.         on: { click: () => message.destroy() },
  15.     });
  16.      // 合并到一个VNode节点中
  17.     const container = h('span', {}, [innerText, innerIcon]);
  18.     return container;
  19. };
  20. // 由于message有多种状态, 这里需要额外处理
  21. const dtMessage = {};
  22. // 给dtMessage循环赋值不同类型的message函数
  23. ['error', 'success', 'info', 'warning', 'warn'].forEach((type) => {
  24.     // 处理message[type](config)参数为对象类型
  25.     dtMessage[type] = (content, duration, onClose) => {
  26.         if (typeof content === 'object') {
  27.             return message[type]({ ...content, content: h => createElementVNode(h, content?.content) });
  28.         }
  29.         return message[type](h => createElementVNode(h, content), duration, onClose);
  30.     };
  31. });
  32. export default dtMessage;
复制代码
  1. // 按需加载antdvue组件的文件(lazy_use.js)

  3. // 引入message.js
  4. import message from '@/core/message.js'
  5. import Vue from 'vue'
  6. // 定义Vue实例的原型属性,使每个Vue实例中都可以用,又不会污染全局作用域
  7. Vue.prototype.$message = message
复制代码
使用
  1. <template>
  2.   <a-button type="primary" @click="onClick">点击弹出message</a-button>
  3. </template>

  5. <script>
  6. export default {
  7.   methods: {
  8.     onClick() {
  9.       this.$message.success('This is a success message');
  10.       this.$message.error('This is an error message');
  11.       this.$message.warning('This is a warning message');
  12.     },
  13.   },
  14. };
  15. </script>

  17. <style></style>
复制代码






欢迎光临 雅安论坛 (https://www.yaanbbs.net/) Powered by Discuz! X3.4