javascript - 我不知道如何制作模态“设置按钮”组件
问题描述
我正在使用 Quasar VueJS 并希望在我的导航栏上创建一个按钮,以打开一个弹出对话框设置面板。我将使用此设置面板来处理动态主题等内容,但这有点离题。
我目前〜严重〜努力弄清楚如何做到这一点。
“布局/MainLayout.vue”
<template>
<q-btn
unelevated
icon="settings"
label="Settings"
color="primary"
v-on:click="SetterUpper"
/>
</template>
<script>
import SetterUpper from "components/SetterUpper";
export default {
name: "MainLayout",
Component: {
SetterUpper
},
};
</script>
“组件/SetterUpper.vue”
<template>
<q-dialog v-model="SetterUpper" persistent>
<q-card>
<q-card-section class="row items-center">
<q-avatar icon="settings" color="primary" text-color="white" />
<span class="q-ml-sm">Placeholder</span>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" v-close-popup />
<q-btn flat label="Save" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
export default {
name: "SetterUpper",
};
</script>
解决方案
将您的 q-dialog 移动到您的父组件。这样您就不必传递任何道具或发出事件来确保多个组件知道您的 v-modal 变量的状态。
像这样 MainLayout.vue
<template>
<q-layout view="lHh Lpr lFf">
<q-dialog v-model="dialogEnabled" persistent>
<SetterUpper />
</q-dialog>
<q-btn
unelevated
icon="settings"
label="Settings"
color="primary"
v-on:click="dialogEnabled = true"
/>
</q-layout>
</template>
<script>
import SetterUpper from 'components/SetterUpper'
export default {
name: 'MainLayout',
components: {
SetterUpper
},
data() {
return {
dialogEnabled: false
}
}
}
</script>
SetterUpper.vue
<template>
<q-card>
<q-card-section class="row items-center">
<q-avatar icon="settings" color="primary" text-color="white"/>
<span class="q-ml-sm">Placeholder</span>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" v-close-popup/>
<q-btn flat label="Save" color="primary" v-close-popup/>
</q-card-actions>
</q-card>
</template>
<script>
export default {
name: 'SetterUpper'
}
</script>
推荐阅读
- java-8 - 在 flink 可查询状态 [version-1.7.2] 下没有得到查询响应
- python - 如何使用最接近的值在 3D numpy 数组中组合 NaN 的前向和后向填充?
- python - 如何有效地从 redis 中获取与模式匹配且小于某个值的所有键
- node.js - 使用 Parcel V2 (modern-syslog) 捆绑节点二进制文件
- c++ - 在多级继承中表达虚拟祖先
- java - 在 Deque 中打印最大元素
- javascript - 刷新页面,直到它更改 chrome 扩展
- python - Systemparsenow 让我的壁纸变黑
- python - 为什么最终会阻止引发异常的返回
- mysql - MariaDB 10.1.44 没有 row_number() 的行数