Vuetify 使用自定义逻辑打开对话框

Posted 2023-02-23

【中文标题】Vuetify 使用自定义逻辑打开对话框

【英文标题】：Vuetify open dialog with custom logic

【发布时间】：2020-07-25 02:26:50

【问题描述】：

我想在单击按钮时打开一个对话框。但我需要在此事件之前和之后执行逻辑。如何做到这一点？

我尝试过的：

模板

<v-dialog v-model="dialog" >
  <template v-slot:activator=" on ">
    <v-btn color="primary" @click="openDialog">Dialog</v-btn>
  </template>
  <v-btn>lol</v-btn>
</v-dialog>

脚本

data() 
    return  dialog: false ;
  ,
  methods: 
    openDialog() 
      this.dialog = true;
    
  

这似乎是一个糟糕的解决方案，因为所有的 v-slot 仍然在那里。

【问题讨论】：

两者都有效。除此之外的任何内容都是基于意见的，因此这里是off-topic。请阅读How to Ask。

@tao 如何在第二个示例中添加逻辑？

这是一个完全不同的问题。确保一次只问一个问题，以便任何可能的答案对任何有类似问题的人都有帮助。如果您提出多个问题，您的问题和任何可能的答案对未来用户的帮助往往会降低。

好吧，平心而论，这个问题是 离题。我会隐藏它，编辑它以成为主题，然后重新打开它。考虑到它已经有了答案，您可以简单地发布一个新答案。由你决定。但是，如果你不关闭它，如果它保持当前形式，社区就会关闭它。你基本上不能在 Stack Overflow 上询问个人喜好。甚至不涉及编码个人偏好。

默认情况下，激活器插槽内的按钮将在单击/点击/聚焦+输入等时打开模式。如果您将其他任何内容绑定到该按钮，它也会运行。见this example。如果您想在自定义组件逻辑上打开模式，请不要使用激活器。使用自定义 fn，运行您的逻辑，并且仅在满足自定义逻辑时才以编程方式打开模式。

【参考方案1】：

在第一个示例中，您实际上不需要使用 v-slot:activator="on" - <v-dialog> 标签可以在没有它的情况下激活 (as described in the "Without activator" example here)。

但是，对我个人而言，推荐的方法是您提供的第二个示例 - 使用 v-on 触发对话框的示例，因为它无需编写额外函数来设置您的 @987654325 之一即可处理打开对话框@变量。