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

Posted 2023-02-23

【中文标题】使用 v-slot:activator 时关闭自定义组件中的 Vuetify v-dialog

【英文标题】：Close a Vuetify v-dialog in a custom component when using v-slot:activator

【发布时间】：2021-12-02 18:49:09

【问题描述】：

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

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

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

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

// file: DeleteDialog.vue
<template>
  <v-dialog :value="value" @input="$emit('input', $event)" >
    <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>

【参考方案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" >

    <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 语法，但我不知道如何将其与您的解决方案结合使用。

请试试我写的closeDialog和<DeleteDialog :value="show_dialog" @close="show_dialog = false> ..... </DeleteDialog>

我一定是拼写错误或者是什么导致了我的问题。我终于能够按照您的建议进行这项工作。可以在此处找到工作版本：codesandbox.io/s/…