我不知道如何制作模态“设置按钮”组件

Question

我正在使用 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>

Answer 1

将您的 q-dialog 移动到您的父组件。这样您就不必传递任何道具或发出事件来确保多个组件知道您的 v-modal 变量的状态。像这样 MainLayout.vue<template>&nbsp; <q-layout view="lHh Lpr lFf">&nbsp; &nbsp; <q-dialog v-model="dialogEnabled" persistent>&nbsp; &nbsp; &nbsp; <SetterUpper />&nbsp; &nbsp; </q-dialog>&nbsp; &nbsp; <q-btn&nbsp; &nbsp; &nbsp; unelevated&nbsp; &nbsp; &nbsp; icon="settings"&nbsp; &nbsp; &nbsp; label="Settings"&nbsp; &nbsp; &nbsp; color="primary"&nbsp; &nbsp; &nbsp; v-on:click="dialogEnabled = true"&nbsp; &nbsp; />&nbsp; </q-layout></template><script>import SetterUpper from 'components/SetterUpper'export default {&nbsp; name: 'MainLayout',&nbsp; components: {&nbsp; &nbsp; SetterUpper&nbsp; },&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; dialogEnabled: false&nbsp; &nbsp; }&nbsp; }}</script>SetterUpper.vue<template>&nbsp; <q-card>&nbsp; &nbsp; <q-card-section class="row items-center">&nbsp; &nbsp; &nbsp; <q-avatar icon="settings" color="primary" text-color="white"/>&nbsp; &nbsp; &nbsp; <span class="q-ml-sm">Placeholder</span>&nbsp; &nbsp; </q-card-section>&nbsp; &nbsp; <q-card-actions align="right">&nbsp; &nbsp; &nbsp; <q-btn flat label="Cancel" color="primary" v-close-popup/>&nbsp; &nbsp; &nbsp; <q-btn flat label="Save" color="primary" v-close-popup/>&nbsp; &nbsp; </q-card-actions>&nbsp; </q-card></template><script>export default {&nbsp; name: 'SetterUpper'}</script>