dangerouslyUseHTMLString选项来启用自定义 HTML 片段

Old:

js 复制代码
     const msg
     = '切换旧版成功,推荐 <span id="changeMsg" style="color: #47FFF1;; text-decoration: underline;">切换新版</span> 体验最新效果';
     
     const message = ElMessage({
         customClass: 'site-toast',
         dangerouslyUseHTMLString: true,
         message: msg,
         type: 'success',
     });
     // 获取 DOM
     document.getElementById('changeMsg')?.addEventListener('click', () => {
         message.close();
         // 切到新版本
         store.commit('updateOldStyle', []);
     });

New:

使用新的原因:不能直接用addeEventListener,不然重复第二次的时候,点击就无法响应了
h() 函数简介

Vue 提供了一个 h() 函数用于创建 虚拟节点vnodes。

h() 是 hyperscript 的简称------意思是"能生成 HTML (超文本标记语言) 的 JavaScript"。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode(),但当你需要多次使用渲染函数时,一个简短的名字会更省力。

js 复制代码
this.$message({
    customClass: 'site-toast',
     dangerouslyUseHTMLString: true,
     message: h('p', null, [
         h('span', null, '切换旧版成功,推荐 '),
         h('span',
             {
                 onClick: () => {},
                 style: 'color: #47FFF1;text-decoration:underline;cursor:pointer' },
             '切换新版'),
         h('span', null, ' 体验最新效果 '),
     ]),
     type: 'success',
});

h() 函数的使用方式非常的灵活

js 复制代码
const vnode = h('div', { id: 'foo' }, [])

vnode.type // 'div'
vnode.props // { id: 'foo' }
vnode.children // []
vnode.key // null
js 复制代码
// 除了类型必填以外,其他的参数都是可选的
h('div')
h('div', { id: 'foo' })

// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })

// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })

// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })

// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')

// 没有 props 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])

// children 数组可以同时包含 vnodes 与字符串
h('div', ['hello', h('span', 'hello')])

其他

使用a标签去跳转

js 复制代码
const msg ='<a href="***" target="_blank" style="color: #47FFF1;text-decoration: underline;cursor:pointer">点我跳转</a>';

   this.$message({
       customClass: 'site-toast',
       dangerouslyUseHTMLString: true,
       message: `<div style="line-height: 22px;">详情请通过有岑${msg}</div>`,
       iconClass: 'el-message__icon el-icon-error',
   });
}
相关推荐
新人11yj43 分钟前
如何给网页增加滚动到顶部的功能
前端·javascript
掘金一周3 分钟前
Figma Dev Mode MCP:大人,时代变了 | 掘金一周7.10
前端·人工智能·mcp
Data_Adventure8 分钟前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
我爱加班、、22 分钟前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
是阿建吖!24 分钟前
【Linux | 网络】socket编程 - 使用TCP实现服务端向客户端提供简单的服务
linux·网络·tcp/ip
香香甜甜的辣椒炒肉27 分钟前
vue快速上手
前端·javascript·vue.js
渡我白衣44 分钟前
Linux操作系统之进程间通信:管道概念
linux
Amelio_Ming1 小时前
C++开源项目—2048.cpp
linux·开发语言·c++
b1gbrother1 小时前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物1 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html