elementUI dialog 组件二次封装 before-close 回调函数作用

before-close 弹框关闭前的回调函数，父组件可以向子组件传递一个函数，用于修改子组件内的变量变量。应用场景如下：

1、封装 dialog 组件为 baseDialog，页面中使用 baseDialog 组件。

2、封装 dialog 组件为 baseDialog，子组件是一个 baseDialog+form 格式，将组件封装为 baseDialogForm，页面中使用 baseDialogForm

具体实现如下：

一、dialog 组件封装：

javascript 复制代码

<template>
  <el-dialog
    class="base-dialog"
    :visible.sync="visible"
    v-bind="$attrs"
    v-on="$listeners"
    :before-close="beforeClose"
  >
    <slot />
    <!-- 默认的 footer 挂载内容 -->
    <div style="text-align: right" v-if="!$slots.footer">
      <el-button :type="okType" :loading="confirmLoading" @click="onOk">{{
        okText
      }}</el-button>
      <el-button @click="onCancel">{{ cancelText }}</el-button>
    </div>
    <!-- 自定义 footer 挂载内容 -->
    <div class="el-dialog__footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'baseDialog',
  props: {
    // 显示/隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 确认按钮文字
    okText: {
      type: String,
      default: '确定'
    },
    // 确认按钮的类型
    okType: {
      type: String,
      default: 'primary'
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: '取消'
    },
    // 确定按钮 loading
    confirmLoading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 确定
    onOk() {
      this.$emit('onOk');
    },

    // 取消
    onCancel() {
      this.$emit('update:visible', false);
      this.$emit('onCancel');
    },

    // 关闭前的回调
    beforeClose() {
      this.onCancel();
    }
  }
};
</script>

<style lang="scss" scoped>
.base-dialog {
}
</style>

二、组件使用部分：

场景1：主页面使用 baseDialog 组件

javascript 复制代码

<template>
  <div>
    <el-button @click="handleOpen">打开弹框</el-button>
    <base-dialog :visible="visible" @onOk="onOk" @onCancel="onCancel">
      dialog...
      <!-- 自定义 footer 挂载内容 -->
      <!-- <div slot="footer">
      <el-button type="primary">审核通过</el-button>
      <el-button type="primary">审核拒绝</el-button>
      <el-button>取消</el-button>
    </div> -->
    </base-dialog>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      visible: false
    };
  },
  methods: {
    handleOpen() {
      this.visible = true;
    },

    onOk() {
      this.visible = false;
    },

    onCancel() {
      this.visible = false;
    }
  }
};
</script>

场景2：将 baseDialog+form 封装为 baseDialogForm 组件

javascript 复制代码

<template>
  <base-dialog
    title="新增"
    :visible.sync="dialogVisible"
    ok-text="提交"
    @onOk="handleConfirm"
    @onCancel="handleCancel"
  >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="审批人">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 自定义 footer 挂载内容 -->
    <!-- <div slot="footer">
      <el-button type="primary">审核通过</el-button>
      <el-button type="primary">审核拒绝</el-button>
      <el-button>取消</el-button>
    </div> -->
  </base-dialog>
</template>

<script>
export default {
  name: 'baseDialogForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      formInline: {
        user: '',
        region: ''
      }
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    }
  },
  methods: {
    // 确定
    handleConfirm() {
      this.$emit('update:visible', false);
    },

    // 取消
    handleCancel() {
      this.$emit('update:visible', false);
    },

    onSubmit() {
      console.log('submit!');
    }
  }
};
</script>

页面使用：

javascript 复制代码

<template>
  <div>
    <el-button @click="handleOpen">打开弹框</el-button>
    <base-dialog-form :visible.sync="visible" @onOk="onOk" @onCancel="onCancel">
      dialog...
    </base-dialog-form>
  </div>
</template>

<script>
import BaseDialogForm from './components/baseDialogForm.vue';

export default {
  name: 'demo',
  components: { BaseDialogForm },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    handleOpen() {
      this.visible = true;
    },

    onOk() {
      this.visible = false;
    },

    onCancel() {
      this.visible = false;
    }
  }
};
</script>

简单总结：

针对于 baseDialog 组件的封装，之前为了更新子组件中的状态，通过使用在组件内部定义一个变量，接收父组件传递过来的 visible 属性实现双向绑定更新状态的效果，今天关注到了before-close 这个回调函数，很好用，使得基础组件的封装更加简洁，进而进行简单的分享与小结。