SuperAPI AI 工具集

primevue-skilld

前端与建站

查看项目

更新于 10-15 23:24

技能介绍

用途:在编写、调试或更新导入 primevue(PrimeVue v5,Vue 3 UI 组件库)的代码时提供指导。资料基于 primevue@5.0.1,文档见 https://primevue.dev。

主要能力与关键事实:v5 采用 PrimeUI 双许可(免费 Community 或付费 Commercial),安装插件时需传入 license 字符串,验证离线进行,缺失、无效或过期密钥可能显示许可提示。官方迁移指南称 v5 相对 v4 无破坏性公共 API 变更,v4 废弃 API 在 v5 仍可用、v6 移除。v5 假定文档根字号为 16px(v4 为 14px),每个预设提供 -compat 变体适配 14px 布局,维护至 2027 年 6 月。

使用方式:用 app.use 安装一次配置插件,默认导出为 primevue/config,也可从包根导入 Config。示例:import PrimeVue from 'primevue/config'; import Aura from '@primeuix/themes/aura'; app.use(PrimeVue, { license: '<your PrimeUI license key>', ripple: true, theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } } })。组件可用可摇树子路径导入(如 import Button from 'primevue/button'、import SelectStyle from 'primevue/select/style'),也可从 'primevue' 根导入。图标来自 @primeicons/vue,@primevue/icons 在 v5 已废弃。

常用任务:Button 用默认插槽组合内容,label、icon、iconPos、loading 等 prop 自 v5.0.0 起废弃;多选改用 Select 的 multiple;标签输入用 InputTags;Toast 通过 ToastService 与 useToast;掩码用 v-mask 指令替代 InputMask 组件;侧边栏用 SidebarLayout 等复合组件;表单可用 FloatLabel、IftaLabel、Fluid,校验状态见 @primevue/forms;DataTable 设置 dataKey 后 expandedRows 绑定对象以提升大数据性能。

限制:新代码不应使用 v5 废弃组件(如 MultiSelect、Galleria、Image、ColorPicker、Password、InputMask 组件、PanelMenu、Chart、Editor 等),应使用替换表;覆盖层基于 Teleport,用 appendTo 与 overlayStyle/overlayClass;优先使用设计令牌与 definePreset,而非 CSS 覆盖。其余细节暂未提供。