Element-ui Notification 通知自定义插入HTML片段

Notification 通知

自定义HTML片段,可以添加按钮、CSS样式、点击事件等

<template>
  <el-button plain @click="open1">
    自定义HTML
  </el-button>

methods: {
      open1() {
          const h = this.$createElement
	      this.notify = this.$notify({
	            title: '自定义HTML',
	            dangerouslyUseHTMLString: true,
	            message: h('div',{
	              class:'personnel'
	            },[
	              h('p',{class:'isCreate'},'新增成功!'), 
	              h('p',{class:'isCreate'},'是否自定义HTML?')),
	              h('div',{class:'personnel-btn'},[
	                h('el-button',{
	                  on:{
	                    click:this.toCreate
	                  }
	                },'确定'),
	                h('el-button',{
	                  on:{
	                    click:this.userClose
	                  }
	                },'取消')
	              ])
	            ]),
	            type: 'success',
	            offset: 100,  // 向下偏移100
	            duration: 0  // 设置不会自动关闭
	        })
      }
}

总之,按照这个方法,你可以在通知里面 添加你想要的组件,样式(套娃)

你可能感兴趣的:(element-ui,vue,js)