const msg
= '切换旧版成功,推荐 切换新版 体验最新效果';
const message = ElMessage({
customClass: 'site-toast',
dangerouslyUseHTMLString: true,
message: msg,
type: 'success',
});
// 获取 DOM
document.getElementById('changeMsg')?.addEventListener('click', () => {
message.close();
// 切到新版本
store.commit('updateOldStyle', []);
});
使用新的原因:不能直接用addeEventListener,不然重复第二次的时候,点击就无法响应了
h() 函数简介Vue 提供了一个 h() 函数用于创建 虚拟节点vnodes。
h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode(),但当你需要多次使用渲染函数时,一个简短的名字会更省力。
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',
});
const vnode = h('div', { id: 'foo' }, [])
vnode.type // 'div'
vnode.props // { id: 'foo' }
vnode.children // []
vnode.key // null
// 除了类型必填以外,其他的参数都是可选的
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标签去跳转
const msg ='点我跳转';
this.$message({
customClass: 'site-toast',
dangerouslyUseHTMLString: true,
message: `详情请通过有岑${msg}`,
iconClass: 'el-message__icon el-icon-error',
});
}