Ant Design of Vue - 让 Message 组件支持手动点击关闭
让 antd 的 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')
补充
- 上文仅为 Message 组件的简单运用,并未处理 duration、onClose 参数
- Message 组件还支持其他配置,文中并未体现,有兴趣请查阅文档
- antd 提供了 Notification 组件,该组件自带关闭功能,视使用场景可选用不同组件
参考
更多推荐
已为社区贡献1条内容
所有评论(0)