如何解决带有多个激活器的 Vuetify 对话框
我有一个用 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>
有没有办法,而不只是复制组件文件来达到我的目标?
解决方法
您可以创建一个全局模态组件以放置在 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 作为全局状态
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。