vue3 element-plus dialog销毁

在Vue3中，Element Plus Dialog的销毁可以通过调用它的close()方法来实现。例如：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="Hello world"
    width="30%"
    :before-close="beforeClose">
    <span>这是一段信息</span>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);
    
    const beforeClose = (done) => {
      // 在此处添加销毁逻辑
      done();
    }
    
    const handleConfirm = () => {
      // 点击“确定”按钮后的逻辑
      dialogVisible.value = false;
    }

    return {
      dialogVisible,
      beforeClose,
      handleConfirm,
    }
  }
}
</script>

在beforeClose函数中，我们可以添加关闭Dialog前需要执行的逻辑，例如清空数据等。当beforeClose函数执行完成后，我们可以通过调用done()方法来关闭Dialog，并且该方法会返回一个Promise对象，可以在Promise对象resolved后执行关闭Dialog的逻辑。