带有多个激活器的 Vuetify 对话框

【问题标题】：Vuetify dialog with multiple activators带有多个激活器的 Vuetify 对话框
【发布时间】：2021-03-06 18:11:00
【问题描述】：

我有一个用 vuetify 制作的对话框，并希望它有多个可能的按钮来激活它。这些按钮彼此不同，并且在几个不同的组件中。所以我不能只将对话框组件导入到位置，因为按钮都是一样的，因为它们是在对话框中定义的：

<v-dialog>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      v-bind="attrs"
      v-on="on"
    >
      Activate
    </v-btn>
  </template>

  <v-card>
    My Content
  </v-card>
</v-dialog>

有没有办法，不只是复制组件文件来达到我的目标？

【问题讨论】：

这个问题不清楚，因为听起来就像在激活器插槽中添加另一个按钮就可以满足您的需求
@shob 哦，你是对的，我添加了非常重要的缺失信息。

标签： vue.js dialog vuetify.js

【解决方案1】：

您可以创建一个全局模态组件以放置在 App.vue 中，并使用v-model 而不是激活器来触发它。 v-model 使用全局状态（例如来自 Vuex 等），您可以从任何地方切换：

模态

<template>
  <v-dialog v-model="$store.state.isModal">
    <v-card>
      My Content
    </v-card>
  </v-dialog>
</template>

然后您可以在其他组件中切换该状态：

<v-btn @click="$store.dispatch('showModal')">SHOW</v-btn>

Here's a demo 使用 Vue.prototype 和 Vue.observable 代替 Vuex 作为全局状态

【讨论】：