前端扩展的 PrimeVue 移除迁移
在 ComfyUI 前端移除 PrimeVue 之后,替换 $primevue、PrimeVue 组件、--p-* CSS 变量和 PrimeVue 工具提示选择器。
前端扩展的 PrimeVue 移除迁移
在 ComfyUI 前端移除 PrimeVue 之后,替换 $primevue、PrimeVue 组件、--p-* CSS 变量和 PrimeVue 工具提示选择器。
ComfyUI 前端不再安装 PrimeVue。宿主应用不会调用 app.use(PrimeVue),因此扩展会失去它们可能曾依赖的三项内容:
- 宿主 Vue 应用上的
$primevue全局属性; - PrimeVue 主题样式表,因此扩展在宿主应用中渲染的 PrimeVue 组件会呈现为无样式状态;以及
- 所有全局
--p-*CSS 变量,例如--p-primary-color、--p-surface-*、--p-text-color、--p-content-background和--p-form-field-border-color。
渲染 PrimeVue 组件的扩展
不要依赖宿主应用的 PrimeVue 实例。你可以用自己编写的标记替换 PrimeVue 组件,也可以为你的 UI 创建一个自己的 Vue 应用,并在该应用上安装 PrimeVue 及其主题。
读取 --p-* 变量的扩展
请将它们替换为设计系统主题变量,这些变量会随当前的浅色或深色主题以及当前的色彩主题变化:
| PrimeVue 变量 | 主题变量 |
|---|---|
--p-primary-color | --primary |
--p-text-color | --foreground |
--p-text-muted-color | --muted-foreground |
--p-content-background | --background |
--p-surface-*(面板、浮层区域) | --secondary |
--p-content-border-color、--p-form-field-border-color | --border |
工具提示
全局 v-tooltip 指令已被移除,工具提示不再渲染 PrimeVue DOM:
.p-tooltip和.p-tooltip-textdata-pd-tooltip属性$_ptooltip*元素属性
处于打开状态的工具提示现在会渲染一个带有 data-slot="tooltip-content" 的元素,并通过 portal 挂载到 document.body 末尾。它仅在工具提示打开期间存在。如果扩展要在自己的 UI 中隐藏工具提示,应定位 [data-slot="tooltip-content"],而不是 .p-tooltip。
--node-component-tooltip* CSS 变量也已从设计系统样式表中移除。请改用主题变量:--background、--foreground 和 --border。旧名称 --base-background、--base-foreground 和 --border-default 已弃用;请参阅已弃用的变量名。
弃用的变量名称
这些说明的早期版本使用了旧的设计系统名称。它们仍然可用,但已弃用,并将在未来版本中移除。现在请改用以下主题变量:
| 弃用名称 | 主题变量 |
|---|---|
--base-background | --background |
--base-foreground | --foreground |
--border-default | --border |
--primary-background | --primary |
--secondary-background | --secondary |
--component-node-background | --node |
PrimeIcons 仍会加载,因此现有的 pi pi-* 图标类仍可继续使用,但它们正在被逐步淘汰。请勿新增使用。