使用v-slot:activator时，关闭自定义组件中的Vuetify v-对话框

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按钮时，我们将发出一个事件close，该事件会使DeleteDialog的父级将传递给它的属性value更改为false。

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

在你的deleteDialog中

//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>

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