如何移除PrimeVue Dialog组件顶部的关闭（X）按钮

有两种常用方法可以移除Dialog组件的关闭图标：

方法一：使用组件自带属性（推荐） #

PrimeVue的Dialog组件提供了showCloseIcon属性，将其设置为false即可直接隐藏关闭图标，这是官方推荐的方式，适配性最好。

示例代码：

<template>
  <Dialog 
    v-model:visible="isDialogVisible" 
    showCloseIcon="false"
    header="自定义对话框"
  >
    这里是对话框的内容区域
  </Dialog>
</template>

<script setup>
import { ref } from 'vue';
import Dialog from 'primevue/dialog';

const isDialogVisible = ref(false);
</script>

方法二：通过CSS样式隐藏 #

如果项目使用的PrimeVue版本不支持showCloseIcon属性，或者需要更灵活的样式控制，可以通过CSS定位关闭按钮的类来隐藏它。

全局隐藏所有Dialog的关闭图标 #

在全局样式文件中添加：

.p-dialog-header-close {
  display: none !important;
}

仅隐藏指定Dialog的关闭图标 #

给目标Dialog添加自定义类名，再通过作用域样式精准控制：

<template>
  <Dialog 
    v-model:visible="isDialogVisible"
    class="no-close-dialog"
    header="无关闭图标对话框"
  >
    仅这个对话框不会显示关闭图标
  </Dialog>
</template>

<style scoped>
:deep(.no-close-dialog .p-dialog-header-close) {
  display: none;
}
</style>

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