环境

"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// 创建 VNodeconst h = app.$createElementlet 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')

---

补充

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

---

参考

Vue官方文档 - createElement

antdv官方文档 - Message