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

Question

我在 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>

有没有一种方法，无需复制组件文件即可达到我的目标？

Answer 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>

这是一个使用Vue.prototype和Vue.observable代替 Vuex 来表示全局状态的演示