如何open/close在类星体中正确使用道具对话?
How to open/close dialog in quasar using props correctly?
嗨,我坚持使用类星体对话框处理事件。首先,我有一个对话框组件(对于 cookie,用户可以单击两个按钮 - 一个用于接受 cookie,一个用于显示更多)。
当用户单击 showMore 时,它应该打开下一个对话框,其中包含一些基本文本和几个按钮(这对这个问题不重要)。
所以第一个对话框是父项,第二个是 child。我尝试在 parrent (isOpen = true) 中创建 ref 并将其发送到 child。问题是道具是 read-only,当我在对话框外的屏幕上单击时,我收到了警告。这是因为有隐藏对话框的本机操作(我需要此操作保持有效)所以我不能这样做:/
我真的被困在这个问题上很长时间了,所以感谢任何帮助:/
父母
<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>
默认情况下,Quasar 对话框可以通过某些用户操作关闭(单击外部,按 Esc
键)- 此功能是 Dialog 组件的一部分。所以对话框本身需要改变它的可见性状态。由于 Vue 中的 props 是 read-only,所以仅通过 prop 控制 Dialog 是不可能的。这就是为什么控制 Dialog 可见性的主要方法是 v-model
如果你真的需要将第二个对话框分离到它自己的组件中(而不是仅仅将它放在父对话框中的主对话框旁边),你的组件应该实现 v-model
并将其转发到 q-dialog
使用computed
如下例所示:
<!-- 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' />
嗨,我坚持使用类星体对话框处理事件。首先,我有一个对话框组件(对于 cookie,用户可以单击两个按钮 - 一个用于接受 cookie,一个用于显示更多)。 当用户单击 showMore 时,它应该打开下一个对话框,其中包含一些基本文本和几个按钮(这对这个问题不重要)。
所以第一个对话框是父项,第二个是 child。我尝试在 parrent (isOpen = true) 中创建 ref 并将其发送到 child。问题是道具是 read-only,当我在对话框外的屏幕上单击时,我收到了警告。这是因为有隐藏对话框的本机操作(我需要此操作保持有效)所以我不能这样做:/
我真的被困在这个问题上很长时间了,所以感谢任何帮助:/
父母
<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>
默认情况下,Quasar 对话框可以通过某些用户操作关闭(单击外部,按 Esc
键)- 此功能是 Dialog 组件的一部分。所以对话框本身需要改变它的可见性状态。由于 Vue 中的 props 是 read-only,所以仅通过 prop 控制 Dialog 是不可能的。这就是为什么控制 Dialog 可见性的主要方法是 v-model
如果你真的需要将第二个对话框分离到它自己的组件中(而不是仅仅将它放在父对话框中的主对话框旁边),你的组件应该实现 v-model
并将其转发到 q-dialog
使用computed
如下例所示:
<!-- 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' />