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

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>

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