Element UI的 h(‘ElCheckbox‘)

原创已于 2022-04-12 15:57:57 修改 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2021-08-05 14:23:13 首次发布

css 同时被 2 个专栏收录

9 篇文章

订阅专栏

Element UI

4 篇文章

订阅专栏

这篇博客详细记录了如何在Vue项目中利用ElementUI的MessageBox组件创建一个包含HTML内容、多选框及自定义关闭逻辑的弹框。通过设置message属性支持HTML片段，使用h函数插入ElCheckbox组件，并在beforeClose方法中控制弹框关闭，实现了在用户点击确认后添加loading状态的效果。示例代码展示了如何结合使用这些特性以实现更丰富的用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>