element消息提示自定义方法

element-ui是有多种消息提示的组件，比如：Message、MessageBox、Notification，在使用它们时，很多人都只是使用基础功能，而很少自定义控制其内容。自定义可以用vnode或者html来实现，笔者这里以开发中的实例来举例

Notification的html自定义实现

要做的是一个弹框，弹出后支持展开折叠。

需要注意的点是onclick绑定的方法，不知道为什么vue中写的方法没法直接调用，需要先把该方法挂载到window中，然后绑定window下的对应方法到onclick中

onclick绑定方法实现展开折叠是用操作dom的方式实现的，通过点击事件的回调定位到元素，然后对其进行操作

import { Notification } from 'element-ui'
function unflod(event) {
    console.log(this, event.path[0].innerHTML)
    event.path[0].innerHTML === '展开失败原因' ? event.path[0].innerHTML = '收起失败原因' : event.path[0].innerHTML = '展开失败原因'
    event.path[1].children[2].style.display === '' ? event.path[1].children[2].style.display = 'none' : event.path[1].children[2].style.display = ''
}
window.unflod = unflod

function notification(res) {
    Notification.error({
        title: '删除失败',
        dangerouslyUseHTMLString: true,
        customClass: 'NotificationFilter',
        message:
            `
            <div style='max-height: 200px;overflow: auto;white-space: normal;word-break: break-all;word-wrap: break-word;padding-right: 3px;position: relative'>
                <div><h4>${res.message}</h4></div>
                <div style='right: 10px; top: 0; cursor: pointer' class='el-button--text unflod' onclick='window.unflod(event)'>展开失败原因</div>
                <div style='display: none; margin-bottom: 10px; color: red; font-weight: bold; cursor: pointer'>${res.detail}</div>
            </div>
            `,
        duration: 0,
        position: 'bottom-right'
    })
}

使用的时候只需要调用如：notification({ message: 'message', detail: 'detail' })