先说一下 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,
});
-
页面效果
image.png
但这种方式还有一个弊端，如果有多个嵌套层，写起来相当复杂和混乱，接下来就用 JSX 的方式重新上面代码。
- 首先 vue 中默认是不支持 JSX 的，我们需要在项目中安装一些 npm 包
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
- 然后在 .babelrc 文件中加入，如果没有这个文件，需要在项目的根路径创建这个文件
{
"presets": ["@vue/babel-preset-jsx"]
}
- 重新上面的 message 中的代码：
message: (
<div onClick={this.handleClick}>
这是一段文字
<a target='_blank' href='https://www.jianshu.com/u/639201a5d397'>
<el-button size="small" type="primary">查看详情</el-button>
</a>
</div>
),
- JSX 的方式还是减少了很多的代码量的，如果你对 react 了解的话，基本无压力上手就能写。