PrimeVue Fieldset 组件完全解析分组内容、可折叠面板与主题定制实战【免费下载链接】primevueNext Generation Vue UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primevueFieldsetFieldset 分组是 PrimeVue 中用于将相关内容组织在一起的轻量级分组组件它基于语义化的 HTMLfieldset元素构建并内置了内容展开/折叠toggleable能力。本文基于 PrimeVue 仓库的官方 LLM 文档与组件源码完整覆盖 Fieldset 的引入方式、基础与模板用法、可折叠行为、无障碍支持、全部 Props/Slots/事件、PassThrough 配置及设计令牌Design Tokens主题定制并深入其源码实现与单元测试帮助你在表单分区、设置页折叠区等场景直接落地该组件。组件定位与引入方式Fieldset 的定位是「一个带内容切换功能的分组组件」a grouping component with a content toggle feature。在 Vue 3 应用中按组件方式引入即可import Fieldset from primevue/fieldset;在仓库中组件实现位于 Fieldset.vue它继承自 BaseFieldset.vue。BaseFieldset 负责声明核心 Propslegend、toggleable、collapsed、toggleButtonProps、挂载样式并通过provide向外暴露$pcFieldset实例Fieldset.vue 则在此基础上实现模板、折叠状态管理与事件逻辑。基础用法最简 Fieldset 只需一个legend属性标题文本加上默认插槽内容Fieldset legendHeader p classm-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /p /Fieldset对应源码模板可以确认其 DOM 结构根元素是fieldset classp-fieldset内部包含legend与一个roleregion的内容容器默认插槽内容被包裹在contentContainer contentWrapper content三层 div 中见 Fieldset.vue。自定义 Legend 模板TemplateLegend 区域可以通过#legend插槽完全自定义例如加入头像、图标等富内容Fieldset template #legend div classflex items-center pl-2 Avatar image/images/avatar/amyelsner.png shapecircle / span classfont-bold p-2Amy Elsner/span /div /template p classm-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /p /Fieldset完整的组合式 API 写法可参考 showcase 中的 TemplateDoc.vue。源码层面还有一个文档表格未列出的细节#legend插槽的作用域参数中携带了toggleCallback即组件内部的toggle方法类型定义见 Fieldset.d.tslegend(scope: { toggleCallback: (event: Event) void; }): VNode[];这意味着当你完全接管 legend 区域时仍可以手动绑定点击行为触发折叠切换而不丢失 toggleable 能力。Toggleable可折叠内容启用toggleable后legend 区域变为按钮点击即可展开/收起内容collapsed属性定义内容的默认可见状态Fieldset legendHeader :toggleabletrue p classm-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /p /Fieldset初始收起可通过:collapsedtrue设置也可用v-model:collapsed双向绑定组件会 emitupdate:collapsed事件或在toggle回调中读取新的折叠状态。demo 完整示例见 ToggleableDoc.vue。源码中的折叠机制从 Fieldset.vue 的实现可以看到内部状态d_collapsed初始值取自collapsedprop并通过watch同步 prop 变化toggle()方法翻转状态后依次发出update:collapsed供 v-model 使用与toggle事件事件载荷为{ originalEvent, value }value是切换后的布尔折叠状态类型定义FieldsetToggleEvent见 Fieldset.d.ts展开/收起动画由 Vue 的transition namep-collapsible包裹内容容器实现且可通过 PassThrough 的transition选项覆盖v-bindptm(transition)。单元测试 Fieldset.spec.js 验证了两点挂载后.p-fieldset-legend、.p-fieldset-toggle-button、.p-fieldset-content-container等结构存在将collapsed设为false后调用toggle()update:collapsed事件首个值应为[true]与上述实现一一对应。无障碍Accessibility设计官方文档明确了 Fieldset 的无障碍设计读屏场景下使用语义化fieldset元素启用toggleable后legend内包含一个button元素按钮通过aria-controls指向内容区的 id通过aria-expanded表达可见性状态按钮朗读值默认为legend属性的值可通过toggleButtonProps传入aria-label或aria-labelledby自定义内容区使用roleregion其id与按钮的aria-controls匹配aria-labelledby指向标题元素 id。从源码可以逐条印证Fieldset.vuebutton v-iftoggleable :id$id _header :aria-controls$id _content :aria-expanded!d_collapsed :aria-labelbuttonAriaLabel ... 其中buttonAriaLabel计算属性的逻辑是toggleButtonProps.ariaLabel存在则优先使用否则回退到legendFieldset.vue内容容器则是div v-show!d_collapsed :id$id _content :classcx(contentContainer) roleregion :aria-labelledby$id _header ...注意非 toggleable 模式下标题是一个span而非按钮此时不渲染aria-controls/aria-expanded。切换按钮键盘支持按键功能tab焦点移动到页面 tab 序列中下一个可聚焦元素shift tab焦点移动到页面 tab 序列中上一个可聚焦元素enter切换内容可见性space切换内容可见性键盘行为的源码实现在onKeyDown方法中监听Enter、NumpadEnter、Space三个键码命中即调用toggle()并preventDefault()Fieldset.vue保证了按钮语义与键盘可访问性。更多细节见 AccessibilityDoc.vue。Props 完整列表名称类型默认值说明legendstring-分组标题文本toggleablebooleanfalse启用后点击 legend 可切换内容显示collapsedbooleanfalse定义内容的默认可见状态toggleButtonPropsAnchorHTMLAttributes-透传给内部按钮的属性可携带aria-label等dtanyDesignToken-使用设计令牌为组件生成作用域 CSS 变量ptPassThroughFieldsetPassThroughOptions-向组件内部 DOM 元素传递属性ptOptionsanyPassThroughOptions-配置 PassThrough 行为选项unstyledbooleanfalse启用后移除组件相关的核心样式以上与 Fieldset.d.ts 中FieldsetProps的 TypeScript 定义一致。补充两点源码细节组件还声明了emits: [update:collapsed, toggle]其中update:collapsed使v-model:collapsed成为官方支持的双向绑定方式dataP计算属性会把toggleable状态序列化到根元素的data-p属性如data-ptoggleable主题 CSS 可据此区分两种形态便于写条件样式。Slots名称作用域参数说明default-分组内容默认插槽legendtoggleCallback自定义 legend 区域作用域提供切换回调toggleiconcollapsed当前折叠状态、class图标样式类自定义切换图标收起/展开时默认分别渲染PlusIcon/MinusIcon来自primevue/iconstogglericon同上已废弃自 v4.0 起请改用toggleicon图标插槽在源码中的默认实现Fieldset.vueslot :name$slots.toggleicon ? toggleicon : togglericon :collapsedd_collapsed :classcx(toggleIcon) component :isd_collapsed ? PlusIcon : MinusIcon :classcx(toggleIcon) v-bindptm(toggleIcon) / /slot可见组件会自动兼容旧的togglericon插槽名未自定义时图标随d_collapsed在加号/减号间切换。PassThrough 配置选项pt属性可按内部 DOM 元素粒度透传属性字段与 FieldsetPassThroughOptions 一致名称类型说明rootFieldsetPassThroughOptionType传递属性到根元素fieldsetlegendFieldsetPassThroughOptionType传递属性到 legend 元素toggleButtonFieldsetPassThroughOptionType传递属性到切换按钮toggleIconFieldsetPassThroughOptionType传递属性到切换图标legendLabelFieldsetPassThroughOptionType传递属性到 legend 标签 spancontentContainerFieldsetPassThroughOptionType传递属性到内容容器roleregion的 divcontentWrapperFieldsetPassThroughOptionType传递属性到内容包裹层contentFieldsetPassThroughOptionType传递属性到内容层hooksanyComponentHooks管理组件生命周期钩子transitionFieldsetPassThroughTransitionType控制 Vue Transition API覆盖p-collapsible过渡每个pt字段既可以是属性对象也可以是返回属性/类名的函数函数接收instance、props、state含当前d_collapsed状态、attrs等上下文见 FieldsetPassThroughMethodOptions。在线查看各元素 DOM 结构可用 showcase 的 PT 查看器。主题定制ThemingCSS 类名类名说明p-fieldset根元素p-fieldset-legendlegend 元素p-fieldset-legend-labellegend 标签元素p-fieldset-toggle-button切换按钮仅 toggleable 模式p-fieldset-toggle-icon切换图标p-fieldset-content-container内容容器p-fieldset-content内容元素单元测试中对.p-fieldset.p-component、.p-fieldset-legend、.p-fieldset-toggle-button、.p-fieldset-content-container的存在性断言Fieldset.spec.js可作为这些类名的可靠依据。Design Tokens设计令牌以下令牌与 Fieldset.d.ts 及主题预设中的定义一致各主题预设如 aura、lara分别提供具体取值令牌CSS 变量说明fieldset.background--p-fieldset-background根元素背景fieldset.border.color--p-fieldset-border-color根元素边框颜色fieldset.border.radius--p-fieldset-border-radius根元素圆角fieldset.color--p-fieldset-color根元素文字颜色fieldset.padding--p-fieldset-padding根元素内边距fieldset.transition.duration--p-fieldset-transition-duration根元素过渡时长fieldset.legend.background--p-fieldset-legend-backgroundlegend 背景fieldset.legend.hover.background--p-fieldset-legend-hover-backgroundlegend 悬停背景fieldset.legend.color--p-fieldset-legend-colorlegend 文字颜色fieldset.legend.hover.color--p-fieldset-legend-hover-colorlegend 悬停文字颜色fieldset.legend.border.radius--p-fieldset-legend-border-radiuslegend 圆角fieldset.legend.border.width--p-fieldset-legend-border-widthlegend 边框宽度fieldset.legend.border.color--p-fieldset-legend-border-colorlegend 边框颜色fieldset.legend.padding--p-fieldset-legend-paddinglegend 内边距fieldset.legend.gap--p-fieldset-legend-gaplegend 子项间距fieldset.legend.font.weight--p-fieldset-legend-font-weightlegend 字重fieldset.legend.focus.ring.width--p-fieldset-legend-focus-ring-widthlegend 焦点环宽度fieldset.legend.focus.ring.style--p-fieldset-legend-focus-ring-stylelegend 焦点环样式fieldset.legend.focus.ring.color--p-fieldset-legend-focus-ring-colorlegend 焦点环颜色fieldset.legend.focus.ring.offset--p-fieldset-legend-focus-ring-offsetlegend 焦点环偏移fieldset.legend.focus.ring.shadow--p-fieldset-legend-focus-ring-shadowlegend 焦点环阴影fieldset.toggle.icon.color--p-fieldset-toggle-icon-color切换图标颜色fieldset.toggle.icon.hover.color--p-fieldset-toggle-icon-hover-color切换图标悬停颜色fieldset.content.padding--p-fieldset-content-padding内容区內边距使用dt属性可针对单个组件实例覆盖令牌生成作用域 CSS 变量全局主题调整则参考官方 Tailwind 主题文档仓库内对应实现可参考 TailwindDoc.vue。小结Fieldset 是语义化fieldset封装核心 Props 只有legend、toggleable、collapsed、toggleButtonProps四个其余为通用主题/透传配置dt、pt、ptOptions、unstyledtoggleable开启后 legend 变为带aria-controls/aria-expanded的按钮支持Enter/Space键盘切换#legend插槽作用域参数中的toggleCallback允许完全自定义标题区时保留切换能力状态交互通过update:collapsedv-model与toggle事件载荷{ originalEvent, value }两个 emit 完成并有单元测试覆盖主题定制走两条路径按p-fieldset-*类名写 CSS或按fieldset.*设计令牌覆盖 CSS 变量data-ptoggleable属性可用于区分两种形态的样式。更多示例基础、模板、可折叠、无障碍、PT、主题均可在 showcase 文档目录 apps/showcase/doc/fieldset/ 中查看。【免费下载链接】primevueNext Generation Vue UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primevue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
PrimeVue Fieldset 组件完全解析分组内容、可折叠面板与主题定制实战【免费下载链接】primevueNext Generation Vue UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primevueFieldsetFieldset 分组是 PrimeVue 中用于将相关内容组织在一起的轻量级分组组件它基于语义化的 HTMLfieldset元素构建并内置了内容展开/折叠toggleable能力。本文基于 PrimeVue 仓库的官方 LLM 文档与组件源码完整覆盖 Fieldset 的引入方式、基础与模板用法、可折叠行为、无障碍支持、全部 Props/Slots/事件、PassThrough 配置及设计令牌Design Tokens主题定制并深入其源码实现与单元测试帮助你在表单分区、设置页折叠区等场景直接落地该组件。组件定位与引入方式Fieldset 的定位是「一个带内容切换功能的分组组件」a grouping component with a content toggle feature。在 Vue 3 应用中按组件方式引入即可import Fieldset from primevue/fieldset;在仓库中组件实现位于 Fieldset.vue它继承自 BaseFieldset.vue。BaseFieldset 负责声明核心 Propslegend、toggleable、collapsed、toggleButtonProps、挂载样式并通过provide向外暴露$pcFieldset实例Fieldset.vue 则在此基础上实现模板、折叠状态管理与事件逻辑。基础用法最简 Fieldset 只需一个legend属性标题文本加上默认插槽内容Fieldset legendHeader p classm-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /p /Fieldset对应源码模板可以确认其 DOM 结构根元素是fieldset classp-fieldset内部包含legend与一个roleregion的内容容器默认插槽内容被包裹在contentContainer contentWrapper content三层 div 中见 Fieldset.vue。自定义 Legend 模板TemplateLegend 区域可以通过#legend插槽完全自定义例如加入头像、图标等富内容Fieldset template #legend div classflex items-center pl-2 Avatar image/images/avatar/amyelsner.png shapecircle / span classfont-bold p-2Amy Elsner/span /div /template p classm-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /p /Fieldset完整的组合式 API 写法可参考 showcase 中的 TemplateDoc.vue。源码层面还有一个文档表格未列出的细节#legend插槽的作用域参数中携带了toggleCallback即组件内部的toggle方法类型定义见 Fieldset.d.tslegend(scope: { toggleCallback: (event: Event) void; }): VNode[];这意味着当你完全接管 legend 区域时仍可以手动绑定点击行为触发折叠切换而不丢失 toggleable 能力。Toggleable可折叠内容启用toggleable后legend 区域变为按钮点击即可展开/收起内容collapsed属性定义内容的默认可见状态Fieldset legendHeader :toggleabletrue p classm-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /p /Fieldset初始收起可通过:collapsedtrue设置也可用v-model:collapsed双向绑定组件会 emitupdate:collapsed事件或在toggle回调中读取新的折叠状态。demo 完整示例见 ToggleableDoc.vue。源码中的折叠机制从 Fieldset.vue 的实现可以看到内部状态d_collapsed初始值取自collapsedprop并通过watch同步 prop 变化toggle()方法翻转状态后依次发出update:collapsed供 v-model 使用与toggle事件事件载荷为{ originalEvent, value }value是切换后的布尔折叠状态类型定义FieldsetToggleEvent见 Fieldset.d.ts展开/收起动画由 Vue 的transition namep-collapsible包裹内容容器实现且可通过 PassThrough 的transition选项覆盖v-bindptm(transition)。单元测试 Fieldset.spec.js 验证了两点挂载后.p-fieldset-legend、.p-fieldset-toggle-button、.p-fieldset-content-container等结构存在将collapsed设为false后调用toggle()update:collapsed事件首个值应为[true]与上述实现一一对应。无障碍Accessibility设计官方文档明确了 Fieldset 的无障碍设计读屏场景下使用语义化fieldset元素启用toggleable后legend内包含一个button元素按钮通过aria-controls指向内容区的 id通过aria-expanded表达可见性状态按钮朗读值默认为legend属性的值可通过toggleButtonProps传入aria-label或aria-labelledby自定义内容区使用roleregion其id与按钮的aria-controls匹配aria-labelledby指向标题元素 id。从源码可以逐条印证Fieldset.vuebutton v-iftoggleable :id$id _header :aria-controls$id _content :aria-expanded!d_collapsed :aria-labelbuttonAriaLabel ... 其中buttonAriaLabel计算属性的逻辑是toggleButtonProps.ariaLabel存在则优先使用否则回退到legendFieldset.vue内容容器则是div v-show!d_collapsed :id$id _content :classcx(contentContainer) roleregion :aria-labelledby$id _header ...注意非 toggleable 模式下标题是一个span而非按钮此时不渲染aria-controls/aria-expanded。切换按钮键盘支持按键功能tab焦点移动到页面 tab 序列中下一个可聚焦元素shift tab焦点移动到页面 tab 序列中上一个可聚焦元素enter切换内容可见性space切换内容可见性键盘行为的源码实现在onKeyDown方法中监听Enter、NumpadEnter、Space三个键码命中即调用toggle()并preventDefault()Fieldset.vue保证了按钮语义与键盘可访问性。更多细节见 AccessibilityDoc.vue。Props 完整列表名称类型默认值说明legendstring-分组标题文本toggleablebooleanfalse启用后点击 legend 可切换内容显示collapsedbooleanfalse定义内容的默认可见状态toggleButtonPropsAnchorHTMLAttributes-透传给内部按钮的属性可携带aria-label等dtanyDesignToken-使用设计令牌为组件生成作用域 CSS 变量ptPassThroughFieldsetPassThroughOptions-向组件内部 DOM 元素传递属性ptOptionsanyPassThroughOptions-配置 PassThrough 行为选项unstyledbooleanfalse启用后移除组件相关的核心样式以上与 Fieldset.d.ts 中FieldsetProps的 TypeScript 定义一致。补充两点源码细节组件还声明了emits: [update:collapsed, toggle]其中update:collapsed使v-model:collapsed成为官方支持的双向绑定方式dataP计算属性会把toggleable状态序列化到根元素的data-p属性如data-ptoggleable主题 CSS 可据此区分两种形态便于写条件样式。Slots名称作用域参数说明default-分组内容默认插槽legendtoggleCallback自定义 legend 区域作用域提供切换回调toggleiconcollapsed当前折叠状态、class图标样式类自定义切换图标收起/展开时默认分别渲染PlusIcon/MinusIcon来自primevue/iconstogglericon同上已废弃自 v4.0 起请改用toggleicon图标插槽在源码中的默认实现Fieldset.vueslot :name$slots.toggleicon ? toggleicon : togglericon :collapsedd_collapsed :classcx(toggleIcon) component :isd_collapsed ? PlusIcon : MinusIcon :classcx(toggleIcon) v-bindptm(toggleIcon) / /slot可见组件会自动兼容旧的togglericon插槽名未自定义时图标随d_collapsed在加号/减号间切换。PassThrough 配置选项pt属性可按内部 DOM 元素粒度透传属性字段与 FieldsetPassThroughOptions 一致名称类型说明rootFieldsetPassThroughOptionType传递属性到根元素fieldsetlegendFieldsetPassThroughOptionType传递属性到 legend 元素toggleButtonFieldsetPassThroughOptionType传递属性到切换按钮toggleIconFieldsetPassThroughOptionType传递属性到切换图标legendLabelFieldsetPassThroughOptionType传递属性到 legend 标签 spancontentContainerFieldsetPassThroughOptionType传递属性到内容容器roleregion的 divcontentWrapperFieldsetPassThroughOptionType传递属性到内容包裹层contentFieldsetPassThroughOptionType传递属性到内容层hooksanyComponentHooks管理组件生命周期钩子transitionFieldsetPassThroughTransitionType控制 Vue Transition API覆盖p-collapsible过渡每个pt字段既可以是属性对象也可以是返回属性/类名的函数函数接收instance、props、state含当前d_collapsed状态、attrs等上下文见 FieldsetPassThroughMethodOptions。在线查看各元素 DOM 结构可用 showcase 的 PT 查看器。主题定制ThemingCSS 类名类名说明p-fieldset根元素p-fieldset-legendlegend 元素p-fieldset-legend-labellegend 标签元素p-fieldset-toggle-button切换按钮仅 toggleable 模式p-fieldset-toggle-icon切换图标p-fieldset-content-container内容容器p-fieldset-content内容元素单元测试中对.p-fieldset.p-component、.p-fieldset-legend、.p-fieldset-toggle-button、.p-fieldset-content-container的存在性断言Fieldset.spec.js可作为这些类名的可靠依据。Design Tokens设计令牌以下令牌与 Fieldset.d.ts 及主题预设中的定义一致各主题预设如 aura、lara分别提供具体取值令牌CSS 变量说明fieldset.background--p-fieldset-background根元素背景fieldset.border.color--p-fieldset-border-color根元素边框颜色fieldset.border.radius--p-fieldset-border-radius根元素圆角fieldset.color--p-fieldset-color根元素文字颜色fieldset.padding--p-fieldset-padding根元素内边距fieldset.transition.duration--p-fieldset-transition-duration根元素过渡时长fieldset.legend.background--p-fieldset-legend-backgroundlegend 背景fieldset.legend.hover.background--p-fieldset-legend-hover-backgroundlegend 悬停背景fieldset.legend.color--p-fieldset-legend-colorlegend 文字颜色fieldset.legend.hover.color--p-fieldset-legend-hover-colorlegend 悬停文字颜色fieldset.legend.border.radius--p-fieldset-legend-border-radiuslegend 圆角fieldset.legend.border.width--p-fieldset-legend-border-widthlegend 边框宽度fieldset.legend.border.color--p-fieldset-legend-border-colorlegend 边框颜色fieldset.legend.padding--p-fieldset-legend-paddinglegend 内边距fieldset.legend.gap--p-fieldset-legend-gaplegend 子项间距fieldset.legend.font.weight--p-fieldset-legend-font-weightlegend 字重fieldset.legend.focus.ring.width--p-fieldset-legend-focus-ring-widthlegend 焦点环宽度fieldset.legend.focus.ring.style--p-fieldset-legend-focus-ring-stylelegend 焦点环样式fieldset.legend.focus.ring.color--p-fieldset-legend-focus-ring-colorlegend 焦点环颜色fieldset.legend.focus.ring.offset--p-fieldset-legend-focus-ring-offsetlegend 焦点环偏移fieldset.legend.focus.ring.shadow--p-fieldset-legend-focus-ring-shadowlegend 焦点环阴影fieldset.toggle.icon.color--p-fieldset-toggle-icon-color切换图标颜色fieldset.toggle.icon.hover.color--p-fieldset-toggle-icon-hover-color切换图标悬停颜色fieldset.content.padding--p-fieldset-content-padding内容区內边距使用dt属性可针对单个组件实例覆盖令牌生成作用域 CSS 变量全局主题调整则参考官方 Tailwind 主题文档仓库内对应实现可参考 TailwindDoc.vue。小结Fieldset 是语义化fieldset封装核心 Props 只有legend、toggleable、collapsed、toggleButtonProps四个其余为通用主题/透传配置dt、pt、ptOptions、unstyledtoggleable开启后 legend 变为带aria-controls/aria-expanded的按钮支持Enter/Space键盘切换#legend插槽作用域参数中的toggleCallback允许完全自定义标题区时保留切换能力状态交互通过update:collapsedv-model与toggle事件载荷{ originalEvent, value }两个 emit 完成并有单元测试覆盖主题定制走两条路径按p-fieldset-*类名写 CSS或按fieldset.*设计令牌覆盖 CSS 变量data-ptoggleable属性可用于区分两种形态的样式。更多示例基础、模板、可折叠、无障碍、PT、主题均可在 showcase 文档目录 apps/showcase/doc/fieldset/ 中查看。【免费下载链接】primevueNext Generation Vue UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primevue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
