使用 v-slot:activator 时关闭自定义组件中的 Vuetify v-dialog

Question

我正在尝试创建一个包含 Vuetify v-dialog 的自定义组件。

我在使用对话框内的按钮关闭对话框时遇到问题。

我尝试了很多方法，例如 @emit('input', false)、this.value = false 或使用本地数据值而不是 value，但似乎没有任何效果。

我的对话框如下所示（简化）：

// file: DeleteDialog.vue
<template>
  <v-dialog :value="value" @input="$emit('input', $event)" width="550">
    <template v-slot:activator="{ on, attrs }">
      <slot
          name="activator"
          v-bind:on="on"
          v-bind:attrs="attrs"></slot>
    </template>

    <v-btn @click="closeDialog">
      Close
    </v-btn>

  </v-dialog>
</template>

<script>
export default {
  props: {
    value: Boolean,
  },
  methods: {
    closeDialog() {
      this.$emit('input', false);
    },
  },
};
</script>

当使用这样的对话框时，如何让关闭按钮工作？

<DeleteDialog>
  <template v-slot:activator="{on, attrs">
    <v-btn v-on="on" v-bind="attrs">
      Show dialog
    </v-btn>
  </template>
  Are you sure you want to delete this user?
</DeleteDialog>

Answer 1

您传递的道具value 负责在DeleteDialog.vue 中显示或隐藏您的v-dialog。 因此，当单击关闭按钮时，我们将发出一个事件 close，这将使 DeleteDialog 的父级更改它传递给它的 prop value 为 false。

// in your parent component
<DeleteDialog :value="show_dialog" @close="show_dialog = false> 

在你的删除对话框中

//in delete dialog
<template>
  <v-dialog :value="value" width="550">

    <v-btn @click="closeDialog">
      Close
    </v-btn>

  </v-dialog>
</template>

<script>
export default {
  props: {
    value: Boolean,
  },
  methods: {
    closeDialog() {
      this.$emit('close');
    },
  },
};
</script>

我认为这是实现您想要的更合适的方式