使用 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 的父级将传递给它的属性 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>

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

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

Close a Vuetify v-dialog in a custom component when using v-slot:activator

vue.js

vue-component

vuetify.js