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

在Element UI的<el-dialog>组件中，before-close是一个属性，用于指定对话框关闭前的回调函数。该回调函数接收两个参数：一个是Dialog关闭的原因，另一个是一个done函数，调用它会真正关闭Dialog。

如果你想要通过二次封装来使用这个回调函数，你可以创建一个封装组件，将before-close作为属性传递给<el-dialog>。

下面是一个简单的封装例子：

<template>
  <el-dialog
    :visible="visible"
    :before-close="handleBeforeClose"
    @update:visible="onVisibleChange">
    <!-- dialog content -->
  </el-dialog>
</template>
 
<script>
export default {
  props: {
    visible: Boolean,
    beforeClose: Function
  },
  methods: {
    handleBeforeClose(action, done) {
      if (this.beforeClose) {
        this.beforeClose(action, done);
      } else {
        done();
      }
    },
    onVisibleChange(visible) {
      this.$emit('update:visible', visible);
    }
  }
};
</script>

使用封装组件时，你可以这样传递before-close回调：

<template>
  <custom-dialog
    :visible.sync="dialogVisible"
    :before-close="customBeforeClose">
    <!-- dialog content -->
  </custom-dialog>
</template>
 
<script>
import CustomDialog from './path/to/CustomDialog.vue';
 
export default {
  components: {
    CustomDialog
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    customBeforeClose(action, done) {
      if (confirm('Are you sure to close the dialog?')) {
        done();
      }
    }
  }
};
</script>

在这个例子中，customBeforeClose是一个方法，它会在对话框尝试关闭前被调用。你可以在这个方法里执行任何需要的验证或操作，并通过调用done()来关闭对话框，或者不调用done()来阻止对话框关闭。