Notification 通知自定义内容

解决：

将 ElNotification 配置项 dangerouslyUseHTMLString (将message 属性作为 HTML 片段处理)属性改为true，使用vue h()函数渲染内容。

ElNotification({

        dangerouslyUseHTMLString: true,

        message:  h(.....

        ),

    })

Eg： 创建一个div标签，包裹img和span标签。

ElNotification({

        dangerouslyUseHTMLString: true,//html片段处理

        message:  h(

            'div',

            { style: 'width":"100px";' },

            [

                h('img',{src:new URL('../assets/image/cat.gif',import.meta.url).href,style:{'width':'50px','height':'50px'}}),

                h('span',{style:'color:red;'},'我是薯条'),

            ]

        ),

    })

效果图：

补充Tips：

Vue h()函数：

h(  'div',  { style: 'width":"100px";' } ,  [   ])

参数1：html标签名

参数2：一个对象，内容包括创建的节点的属性

参数3：子节点。内容可以是文本，也可以是标签节点。

相对路径图片导入：

在h( )渲染节点过程中，相对路径无法被识别。

法①：构造函数new URL(url,base).href

url：必填参数, 一个绝对或相对路径。

base：非必填。作为URL对象的基础路径。

法②：使用import直接导入图片路径

import imgUrl from '../assets/image/cat.gif'

.... [...

h('img',{src:imgUrl,}),//也可以直接引入

...]

法③：require(‘../assets/image/cat.gif’)一样可以导入图片路径，但仅支持webpack打包 的项目。

Vue h()函数渲染element组件：

导入element组件之后写入标签名中。

import {ElImage} from 'element-plus';

  ElNotification({

        dangerouslyUseHTMLString: true,

        message:  h(

            'div',

            { style: 'width":"100px";' },

            [

                h(ElImage,{src:new URL('../assets/image/cat.gif', import.meta.url).href,},),

                h('span',{style:'color:red;'},'我是薯条'),

            ]

        ),

    })