如何正确使用道具打开/关闭类星体中的对话框

Question

嗨，我被处理事件的类星体对话框卡住了。首先，我有一个对话框组件(用于cookie，用户可以单击两个按钮——一个用于接受cookie，一个用于显示更多(。当用户点击showMore时，它应该会打开带有一些基本文本和几个按钮的下一个对话框(这对这个问题来说并不重要(。

所以第一个对话框是parrent，第二个对话框是child。我试图在parrent中创建ref(isOpen=true(，并将其发送给child。问题是道具是只读的，当我点击对话框外部的屏幕时，我收到了警告。这是因为有隐藏对话框的本地操作(我需要这个操作保持有效(，所以我不能这样做：/

我真的被困在这上面很长时间了，所以谢谢你的帮助：/

Parrent

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

ChildDialog

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

Answer 1

默认情况下，Quasar对话框可以通过一些用户操作关闭(单击外部，按Esc键(-此功能是对话框组件的一部分。因此对话框本身需要更改其可见性状态。由于Vue中的道具是只读的，因此仅通过道具控制Dialog是不可能的。这就是为什么控制对话框可见性的主要方法是通过v-model

如果您真的需要将第二个对话框分离到它自己的组件中(而不是将其放在Parent中的主对话框旁边(，那么您的组件应该实现v-model，并使用computed将其转发到q-dialog，如下例所示：

<!-- 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' />