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

需求

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

From

to

思路

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

实现

// 方法
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')