封装el-dialog，没有关闭弹窗动画？

Question

下面这段代码是我二次封装的el-dialog

// MY-DIALOG.VUE
<template>
  <el-dialog center append-to-body destroy-on-close>
    <slot />
  </el-dialog>
</template>

但是，我在父组件，调用close函数的时候，dialog没有关闭动画，但是点击dialog右上角自带的关闭按钮时，它是有关闭动画的

<MY-DIALOG v-model="show"></MY-DIALOG>

<script setup>
const show = ref(false)

const close = () => show.value = false
</script>

尝试过在MY-DIALOG里面添加v-bind="$attrs"

<el-dialog v-bind="$attrs"></el-dialog>

还有手动定义model，都没有起到作用

<el-dialog v-model="model"></el-dialog>

const model = defineModel<boolean>({ require: false })

Answer 1

可以在 my-dialog.vue 中使用 before-close 事件。

<template>
  <el-dialog :visible.sync="visible" append-to-body destroy-on-close @before-close="handleClose">
    <slot />
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose(done) {
      // 这里可以添加你自己的关闭逻辑
      done(); // 调用 done() 确保关闭动画触发
    }
  }
}
</script>

在父组件中这样使用：

<template>
  <my-dialog v-model="show"></my-dialog>
  <button @click="close">关闭对话框</button>
</template>

<script setup>
import { ref } from 'vue';
import MyDialog from './my-dialog.vue';

const show = ref(false);

const close = () => show.value = false;
</script>