可最大化 PrimeVue 对话框使用不同的类

Question

我目前正在使用 PrimeVue Dialog。现在我想根据对话框是否最大化使用不同的类/样式。为了简单起见，假设我想在对话框最大化时将文本设置为粗体或红色。我该怎么做？

代码示例：

<template>
    <!-- OTHER STUFF HERE -->
    <Dialog v-model:visible="true" maximizable modal header="TEST" :style="{ width: '50rem' }">
        <div class="formgrid grid">
            <div class="field col-12">
                <!-- use this when dialog is not maximized -->
                <p>Lorem ipsum.</p>

                <!-- add new class/style when dialog is maximized -->
                <p class="font-semibold" style="color: red">Lorem ipsum.</p> 
            </div>
        </div>
    </Dialog>
</template>

总之，我想根据对话框是否最大化使用

v-bind:class

或

v-bind:style

，但问题是我无权访问对话框最大化属性。

Answer 1

我最终做的是：

<script setup>
    const dialog = ref()
    const dialogMaximized = computed(() => dialog.value.maximized)
</script>

<template>
    <div v-if="dialogMaximized">
        ...
    </div>

    <div v-else>
    </div>
</template>

总而言之，我创建了对话框的引用，创建了一个新变量来获取对话框的最大化状态，然后在

<template>

中使用它

目前工作正常，但我将不接受这个问题，因为具有更多专业知识的人可能会给出更好的答案。