使用 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

负责在

v-dialog

内显示或隐藏你的

DeleteDialog.vue

。 因此，当单击关闭按钮时，我们将发出一个事件

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>

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