如何正確使用道具在類星體中打開/關閉對話框？

嗨，我堅持使用類星體對話處理事件。首先，我有一個對話框組件（用于用戶可以單擊兩個按鈕的 cookie - 一個用于接受 cookie，一個用于顯示更多）。當用戶單擊 showMore 時，它??應該打開下一個對話框，其中包含一些基本文本和幾個按鈕（這對于這個問題并不重要）。

所以 FirstDialog 是父母，第二個是孩子。我試圖在parrent（isOpen = true）中創建ref并將其發送給孩子。問題是道具是只讀的，當我在對話框外點擊螢屏時，我收到了警告。這是因為有隱藏對話框的本機操作（我需要這個操作保持作業）所以我不能這樣做：/

我真的被困了很長時間，所以謝謝你的幫助：/

父母

<template>
  <q-dialog :model-value='props.showCookies' position='bottom' persistent>
    <q-card style='max-width: 1920px; width:100%; background-color: rgba(77,80,83,0.9490196078431372 )'>
      <q-card-section>
        <div>
           ....
          <div class='flex' style='justify-content: right'>
            <!-- This is the button to open dialog-->
            <q-btn rounded color='grey-5' label='Zjistit více' class='cookie-button q-mr-sm' @click='showMore' />
            <q-btn rounded color='grey-5' label='Povolit v?e' class='cookie-button' @click='acceptCookies' />
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
  <CookiesDialogWhichWeUse :isOpen='isOpenCookieSettingsWhichWeUse' />
</template>

<script lang='ts'>
import { SetupContext, ref } from 'vue';
import CookiesDialogWhichWeUse from '@/components/Cookies/CookiesDialogWhichWeUse.vue';

export default {
  name: 'CookiesModal',
  emits: ['accept-cookies'],
  components: {
    CookiesDialogWhichWeUse
  },
  props: {
    showCookies: { type: Boolean, required: true }
  },
  setup(props: { showCookies: boolean }, { emit }: SetupContext) {
    const isOpenCookieSettingModal = ref(false);
    const isOpenCookieSettingsWhichWeUse = ref(false);

    const acceptCookies = () => {
      emit('accept-cookies');
    };

    const openCookiesSettings = (value: boolean) => {
      isOpenCookieSettingModal.value = value;
    };

    const showMore = () => {
      console.log('test');
      isOpenCookieSettingsWhichWeUse.value = true;
    };

    return {
      props,
      acceptCookies,
      showMore,
      openCookiesSettings,
      isOpenCookieSettingModal,
      isOpenCookieSettingsWhichWeUse
    };
  }
};
</script>

<style scoped>

</style>

子對話框

<template>
  <q-dialog v-model='open'>
    <q-card
      style='max-width: 761px; width:100%; max-height: 820px; height:100%; background-color: rgba(77,80,83,0.9490196078431372 )'>

      <q-card-section class='row items-center no-wrap'>
          ...
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { toRef } from 'vue';
export default {
  name: 'CookiesDialogWhichWeUse',
  props: {
    isOpen: { type: Boolean, required: true }
  },
  setup(props) {
    const open = toRef(props, 'isOpen');

    return { open };
  }
};
</script>

<style scoped>
.cookie-text p {
  font-size: 22px;
}
</style>

uj5u.com熱心網友回復：

默認情況下，Quasar 對話框可以通過一些用戶操作（點擊外部，Esc按鍵）來關閉，道具通常是不夠的 - 你也需要事件。恕我直言，首選方法是使用v-model

<!-- ChildDialog -->
<template>
  <q-dialog v-model='model'>
    <q-card
      style='max-width: 761px; width:100%; max-height: 820px; height:100%; background-color: rgba(77,80,83,0.9490196078431372 )'>

      <q-card-section class='row items-center no-wrap'>
          ...
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { computed } from 'vue';
export default {
  name: 'CookiesDialogWhichWeUse',
  props: {
    modelValue: { type: Boolean, required: true }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {

    const model = computed({
      get() { return props.modelValue },
      set(newValue) { emit('update:modelValue', newValue) }
    })

    return { model };
  }
};
</script>

和用法：

<CookiesDialogWhichWeUse v-model='isOpenCookieSettingsWhichWeUse' />

標籤：javascript 打字稿 Vue.js 类星体框架 vue-composition-api

上一篇：回圈遍歷陣列物件

下一篇：以物件為鍵的介面或型別在打字稿中