Ant Design of Vue - 让 Message 组件支持手动点击关闭

环境

"ant-design-vue": "^1.6.3",
"vue": "^2.6.11",

---

需求

让 antd 的 Message 组件能够手动触发关闭

From

to

---

思路

查看 antdv 文档 发现 Message 组件支持使用 VNode 作为显示内容，因此只需要使用 Vue 的 createElement 方法创建带有关闭样式的 VNode 即可。

另外，在全局调用 Message 组件时会返回一个关闭当前 Message 的方法，在需要关闭 Message 时可调用此方法

let _remove = app.$message.error('This is an error message')
// 需要关闭 Message 时调用 _remove()
console.log(_remove)

/**
ƒ result() {
   if (messageInstance) {
      messageInstance.removeNotice(target);
    }
  }
*/

---

实现

// 方法
const myMessageError = (content, duration, onClose) => {
    let _remove
    // 创建 VNode
    const h = app.$createElement
    let innerText = h('span', { style: { color: '#000000A6' } }, content);
    let innerIcon = h('a-icon', {
      style: { marginRight: '0px', marginLeft: '20px', color: '#ccc', cursor: 'pointer' },
      attrs: { type: 'close' },
      on: { click: () => _remove() }
    })
    let container = h('span', {}, [innerText, innerIcon])
    
    // 调用 Message 组件
     _remove = app.$message.error({
        content: container,
        duration: duration || 0,
        onClose: onClose,
     })
}

// 调用
myMessageError('This is an error message')

---

补充

1. 上文仅为 Message 组件的简单运用，并未处理 duration、onClose 参数
2. Message 组件还支持其他配置，文中并未体现，有兴趣请查阅文档
3. antd 提供了 Notification 组件，该组件自带关闭功能，视使用场景可选用不同组件

---

参考

Vue官方文档 - createElement

antdv官方文档 - Message