【Ant Design of Vue】实现 message 组件可手动关闭

背景

项目中使用的ant-design-vue版本为1.7.8, this.$message.error()不支持手动关闭提示框。

实现

message的content的类型可以是VNode，一般情况下，我们传入的content是一个字符串，通过下面的createElementVnode方法，对传入的字符串加工下：

import { message } from 'ant-design-vue'

const createElementVnode = (h, content) => {
    const innerText = h('span', {}, content)
    const innerIcon = h('a-icon', {
        style: { marginLeft: '10px', color: '#ccc', cursor: 'pointer' },
        attrs: { type: 'close' },
        on: { click: () => message.destory() }
    })
    return h('span', {}, [innerText, innerIcon])
}

const customMessage = {}
const types = ['success', 'info', 'warning', 'error']
types.forEach(type => {
    customMessage[type] = (content, duration, onClose) => {
        if (typeof content === 'object') message[type]({...content, content: h=> createElementVnode(h, content?.content), duration, onClose})
        messge[type](h => createElementVnode(h, content), duration, onClose)
    }
})

Vue.prototype.$message = customMessage

h为Vue2的渲染函数

参考： v2.cn.vuejs.org/v2/guide/re…