Element UI的 h(‘ElCheckbox‘)

MessageBox 弹框

一篇关于 Element UI 的 MessageBox 记录

使用 HTML 片段 message 属性支持传入 HTML 片段。

在h函数里 使用多选框是

h('ElCheckbox')

打开弹框点击确认之后 不想关闭弹框

使用了beforeClose属性，它的值是一个方法

会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。

它有三个参数：action、实例本身和done方法

使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加loading状态等

此时若需要关闭实例，可以调用done方法

若在beforeClose中没有调用done，则实例不会关闭

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
  	data(){
		return{
			isChecked: true,
		}
	},
    methods: {
      open() {
     	   const h = this.$createElement;
		   const _this = this;
		    this.$prompt('', `数据库${this.res_name}`, {
	        confirmButtonText: '申请',
	        cancelButtonText: '取消',
	        dangerouslyUseHTMLString: true,
	        showInput: false,
      		confirmButtonClass: 'el-button--danger',
        message: h('p', { style: 'max-height: 300px; overflow-y:auto;margin: 20px 0;' }, 
        [
          h('span', null, `数据表：${name}`),
          h('span', { class: 'text-highlight' }, `${applyText}`),
          h('p', { style: 'max-height: 300px; overflow-y:auto;margin: 20px 0;' }),
          h(
            'ElCheckbox',
            {
              props: {
                checked: _this.isChecked
              },
              on: {
                change(val) {
                  _this.isChecked = val;
                }
              }
            },
            '多选框同意'
          )
        ]),
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = false;
          } else {
            done();
          }
        }
      })
        .then(res => {})
        .catch(_ => {});
        });
      }
    }
  }
</script>