环境
"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