vue.js - 封装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>

Answer 2

### 回答

问题出在`v-model`的绑定上。在Vue中，`v-model`不仅仅是一个简单的属性绑定，它同时包含了`value`（或对应的属性）和`input`事件的监听。当你封装一个组件并希望它支持`v-model`时，你需要确保正确地传递`value`属性和监听`input`事件。

对于Element UI的`el-dialog`，它使用`v-model`来控制显示和隐藏，并且当对话框隐藏时会触发一个`close`事件。在你的封装组件中，你需要手动处理这些事件和属性的传递。

你可以通过以下方式修改你的`MY-DIALOG.VUE`组件来确保关闭动画正常工作：

<template>
<el-dialog

v-model="visible"
append-to-body
destroy-on-close
@close="$emit('update:modelValue', false)"

<slot />

</el-dialog>
</template>

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

const props = defineProps({
modelValue: Boolean
});

const visible = ref(props.modelValue);

watch(() => props.modelValue, (newValue) => {
visible.value = newValue;
});
</script>

然后在父组件中，你应该这样使用你的封装组件：

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

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

const show = ref(false);
</script>

这里的关键是：

1. 使用`v-model="visible"`在内部`el-dialog`上，并通过`@close`事件监听对话框的关闭，然后触发一个`update:modelValue`事件来通知父组件更新`v-model`绑定的值。
2. 使用`props.modelValue`来初始化`visible`，并通过`watch`来监听`modelValue`的变化，从而同步更新`visible`的值。

这样，无论是通过父组件的`close`函数还是点击`el-dialog`的关闭按钮，关闭动画都会正常工作。