如何为可最大化的PrimeVue Dialog设置不同样式类？

方法一：通过事件监听维护状态变量 #

PrimeVue Dialog组件自带maximize和restore事件，我们可以借助这两个事件手动维护一个状态变量，以此控制内容样式：

<template>
    <Dialog 
        v-model:visible="dialogVisible" 
        maximizable 
        modal 
        header="TEST" 
        :style="{ width: '50rem' }"
        @maximize="isMaximized = true"
        @restore="isMaximized = false"
    >
        <div class="formgrid grid">
            <div class="field col-12">
                <p :class="{ 'font-semibold text-red': isMaximized }">Lorem ipsum.</p>
            </div>
        </div>
    </Dialog>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(true);
const isMaximized = ref(false);
</script>

<style scoped>
.text-red {
    color: red;
}
</style>

通过@maximize和@restore事件更新isMaximized变量，再用:class动态绑定样式类，就能实现状态切换。

方法二：利用CSS后代选择器（无需JS） #

Dialog最大化时，其根DOM元素会自动添加p-dialog-maximized类，我们可以直接用CSS后代选择器控制内部内容样式，不用额外维护状态：

<template>
    <Dialog 
        v-model:visible="dialogVisible" 
        maximizable 
        modal 
        header="TEST" 
        :style="{ width: '50rem' }"
    >
        <div class="formgrid grid">
            <div class="field col-12">
                <p class="dialog-content">Lorem ipsum.</p>
            </div>
        </div>
    </Dialog>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(true);
</script>

<style scoped>
/* 默认普通文字样式 */
.dialog-content {}

/* 最大化时的加粗红色样式 */
:deep(.p-dialog-maximized) .dialog-content {
    font-weight: bold;
    color: red;
}
</style>

使用:deep()穿透scoped样式，选中最大化状态下的Dialog内部内容，直接修改样式，全程不需要JS逻辑，更轻量化。

场景选择 #

• 方法一适合需要在JS中复用最大化状态做其他逻辑的场景；
• 方法二更适合仅需样式切换的场景，代码更简洁。

内容的提问来源于stack exchange，提问作者YorS