day64-模板语法

背景

vuejs项目中有个需求,在notification消息提示中某个部分需要有点击事件。UI用的element。想到用模板的方法来构造。


element-ui Notification onClick 触发方式

组件中有两种触发的方式,但是都没有很好的满足需求。

点击时触发

this.$notify.warning({
dangerouslyUseHTMLString: true,
duration: 0,
message: `${this.createdFailedMember}个成员创建失败!<a id="message" style="color: #66b1ff;text-decoration: underline;cursor:pointer;" @click=aclick(event)">前往查看</a>`,
onClick: function () {
console.log(1)
}
})

创建时触发

this.$notify.warning({
dangerouslyUseHTMLString: true,
duration: 0,
message: `${this.createdFailedMember}个成员创建失败!<a id="message" style="color: #66b1ff;text-decoration: underline;cursor:pointer;" @click=aclick(event)">前往查看</a>`,
onClick: (function () {
console.log(1)
})()
})

渲染函数

比较灵活的render 函数。非常好用,但是没有模板语法那么简洁。

this.$notify.warning({
message: h(
'div',
{
style: {display: 'inline-block'}
},
[
h('span', `${this.createdFailedMember}个成员创建失败!`),
h('a', {
style: {color: '#409EFF', cursor: 'pointer', 'text-decoration': 'underline'},
on: {
click: this.clickNotificationMsg
}
}, '前往查看')
]
)
})

文章作者: lmislm
文章链接: http://lmislm.com/2019/03/16/2019-03-1111/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog