先說一下 element 中 Message 消息提示，MessageBox 彈框，Notification 通知組件怎么插入自定義的HTML捐祠？用 JSX 的方式怎么實現(xiàn)以及 vue 項目中怎么使用 JSX 眶熬？
我拿 element 組件中常用的 Notification 組件舉例，在項目中怎么使用 JSX 以及怎么用 $createElement.
昨天用到通知消息組件勃黍，想自定義HTML放在 message 中：
this.$notify({
message: `<div onclick="handleClick">查看詳情</div>`,
dangerouslyUseHTMLString: true
});
- 剛看是沒有注意 createElement 的方式宵统，發(fā)現(xiàn)如果按照我上面這么寫，在 vue 中肯定不能實現(xiàn)覆获。
- 接下來用 createElement 的方式創(chuàng)建
const h = this.$createElement;
this.$notify({
title: '這是提示標題',
message: h('div', { on: { click: handleClick }, '查看詳情'),
dangerouslyUseHTMLString: true,
});
- 以上面那種方式創(chuàng)建
-
但是如果我們有多個嵌套的標簽马澈，需要怎么創(chuàng)建
const h = this.$createElement;
this.$notify({
title: '這是提示標題',
message: h('div', null, [
'這是一個段文字',
h('a',
{ attrs: {
href: 'http://www.reibang.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 文件中加入涤伐，如果沒有這個文件馒胆，需要在項目的根路徑創(chuàng)建這個文件
{
"presets": ["@vue/babel-preset-jsx"]
}
- 重新上面的 message 中的代碼：
message: (
<div onClick={this.handleClick}>
這是一段文字
<a target='_blank' href='http://www.reibang.com/u/639201a5d397'>
<el-button size="small" type="primary">查看詳情</el-button>
</a>
</div>
),
- JSX 的方式還是減少了很多的代碼量的，如果你對 react 了解的話凝果，基本無壓力上手就能寫祝迂。
