Я не могу понять, как сделать модальный компонент «кнопка настроек» - PullRequest
Новая
       21

Я не могу понять, как сделать модальный компонент «кнопка настроек»

1 голос
/ 16 апреля 2020

Я использую Quasar VueJS и wi sh, чтобы создать кнопку на панели навигации, которая открывает всплывающую панель настроек диалога. Я собираюсь использовать эту панель настроек для таких вещей, как динамические темы c, но это немного вне топики c.

Я сейчас ~ НЕСКОЛЬКО ~ пытаюсь понять, как это сделать.

"макеты / 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>

1 Ответ

1 голос
/ 16 апреля 2020

Переместите ваше диалоговое окно на родительский компонент. Таким образом, вам не нужно будет передавать какие-либо реквизиты или события emit, чтобы убедиться, что несколько компонентов знают состояние вашей v-модальной переменной.

Примерно так: 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>
...