先说一下 element 中 Message 消息提示,MessageBox 弹框,Notification 通知组件怎么插入自定义的HTML?用 JSX 的方式怎么实现以及 vue 项目中怎么使用 JSX ?
我拿 element 组件中常用的 Notification 组件举例,在项目中怎么使用 JSX 以及怎么用 $createElement.
自定义HTML放在 message 中:
this.$notify({
message: `<div onclick="handleClick">查看详情</div>`,
dangerouslyUseHTMLString: true
});
- 刚看是没有注意 createElement 的方式,发现如果按照我上面这么写,在 vue 中肯定不能实现。
- 接下来用 createElement 的方式创建
const h = this.$createElement;
this.$notify({
title: '这是提示标题',
message: h('div', { on: { click: handleClick }, '查看详情'),
dangerouslyUseHTMLString: true,
});
- 如果我们有多个嵌套的标签,需要怎么创建
const h = this.$createElement;
this.$notify({
title: '这是提示标题',
message: h('div', null, [
'这是一个段文字',
h('a',
{ attrs: {
href: 'https://www.jianshu.com/u/639201a5d397' ,
target: '_blank'
}
},
[
h('el-button', {
style: {
marginLeft: '20px'
},
attrs: {
size: 'small',
type: 'primary'
},
on: {
click: this.handleClick
}
}, '查看详情')
]
)
]),
dangerouslyUseHTMLString: true,
});