vue.js - 带有多个激活器的 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.vuev-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
andVue.observable
代替 Vuex 作为全局状态的演示
推荐阅读
- android-room - RoomDB 是否支持 dropAllTables() 和 createAllTables()?
- python - 确定 pandas Dataframe 中的列是否包含 DATE 或 DATETIME 信息的最简单方法
- lua - 在 Lua 中使用“\”操作 sting 时出错
- android - Android模拟器确实出现了,但它只显示黑屏
- javascript - 将带有 EventEmitter 的消息发送到 observable 并从 observable 订阅发送消息 EventEmitter next,而不是销毁
- python - altair pandas 值计数水平条形图
- python - 如何使用 python 64 位读取 .mdb 文件?
- angular - 如何传递 id 来获取 api url?(Angular)
- javascript - 从数组中提取对象 - 打字稿
- excel - 将数据从多个工作表中获取到为另一个工作表定义的变量中