vue+element ui中messageBox结合createElement搭配使用

今天项目中需要实现一个弹窗的功能 为了代码的美观性 我便决定使用messagebox的这个element ui组件 由于之前没有好好了解过create Element 所以现在做了笔记记录一下
首先 设置触发事件的方法 然后在方法中进行相关操作

    
methods: {
	showVideo(index,data) {
      const h = this.$createElement; //vue中创建元素的方法
      this.$msgbox({
      	title: 'messagebox 笔记',
        message: h('div', null, [ //父标签
		            h(
		              'el-button',  //第一个参数就是html标签
		              {  //有模板中属性对应的数据对象 对标签进行样式和功能的操作
		      			  class: 'className', //类名
		      			  style: 'background: red; color: red;', //style样式设置
		      			  domProps: {
		      			  	innerHTML: '例子'
		      			  },
		      			  on: { //事件
		      			  	click: this.cancelClick
		      			  },
		      			  props: { //组件的props
		      			  	myProps: 'fff'
		      			  },
		      			  attr: { //原生的html属性
		      			  	id: 'idd'
		      			  },
		      			  slot: 'slot-name', //组件名称
		      			  ref: 'message', //ref
					 },
			         	'取消 ' //标签内容
		            ),
        ]),
        showCancelButton: false, //不显示cancel按钮
        showConfirmButton: false, //不显示confirm按钮
        customClass: 'message-infoBox', //自定义customclass
        center: true, //居中显示
        closeOnClickModal: false, //禁止modal关闭
        closeOnPressEscape: false //禁止esc键关闭
      })
    },
	cancelClick() {
      this.$msgbox.close() //关闭message弹框
    }
}