透传道具是访问组件内部 DOM 结构的 API。
每个组件都有一个特殊的 pt 属性来定义一个对象，其中键对应于可用的 DOM 元素。每个值可以是字符串、对象或函数，该函数返回字符串或对象以定义要应用于元素的任意属性，例如样式、aria、data-* 或自定义属性。如果该值是字符串或返回字符串的函数，则将其视为类定义并添加到元素的 class 属性。每个组件文档都有一个专门的部分来记录通过 PT 公开的可用部分名称。
pt 的最常见用法是样式和自定义。class 和 style 属性支持与 Vue 绑定 相同的语法，例如数组、对象和条件语句。以下示例使用 PrimeFlex CSS 库对面板组件进行样式设置。
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.
<Panel header="Header" toggleable
:pt="{
header: (options) => ({
id: 'myPanelHeader',
style: {
'user-select': 'none'
},
class: [
'border-primary',
{
'bg-primary text-primary-contrast': options.state.d_collapsed,
'text-primary bg-primary-contrast': !options.state.d_collapsed
}
]
}),
content: { class: 'border-primary text-lg text-primary-700' },
title: 'text-xl', // OR { class: 'text-xl' }
toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' // OR { class: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' }
}">
<p class="m-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>
</Panel>
声明式语法提供了对程序式语法的替代方案。以 pt 开头的属性由组件根据以下格式进行不同的解释。将来还计划扩展 IDE 以自动完成值，从而改善开发人员体验。
<ComponentTag pt:[passthrough_key]:[attribute]="value" />
以下示例使用相同选项的两种语法替代方案。
<Panel
:pt="{
root: {
class='"border-1 border-solid'
},
header: {
'data-test-id': 'testid',
class: 'bg-blue-500',
onClick: onHeaderClick
}
}"
>
<Panel
pt:root:class="border border-solid"
pt:header:id="headerId"
pt:header:data-test-id="testId"
pt:header:class="bg-blue-500"
:pt:header:onClick="onHeaderClick"
>
组件的生命周期钩子使用 hooks 属性作为透传公开，以便可以注册回调函数。可用的回调是 onBeforeCreate、onCreated、onBeforeUpdate、onUpdated、onBeforeMount、onMounted、onBeforeUnmount 和 onUnmounted。有关生命周期钩子的详细信息，请参阅 Vue.js 文档。
<Panel header="Header" :pt="panelPT">
Content
</Panel>
定义每个组件类型共享的透传属性。例如，使用以下配置，所有面板标题都具有 bg-primary 样式类，而所有自动完成组件都具有固定宽度。这些设置可以被特定组件覆盖，因为组件的 pt 属性优先级高于全局 pt。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
pt: {
panel: {
header: {
class: 'bg-primary text-primary-contrast'
}
},
autocomplete: {
input: {
root: 'w-64' // OR { class: 'w-64' }
}
}
}
});
global 属性具有一个 css 选项，用于定义属于全局 pt 配置的自定义 css。此功能的常见用例是定义与透传道具配置相关的全局样式和动画。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
pt: {
global: {
css: `
button {
padding: 2rem;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
`
}
}
});
使用 usePassThrough 实用程序来自定义现有的透传配置。第一个参数是要自定义的对象，第二个参数是自定义项，最后一个参数是合并策略。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
import { usePassThrough } from "primevue/passthrough";
import BasePreset from "./basepreset";
const app = createApp(App);
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
title: {
class: ['leading-none font-light text-2xl']
}
}
},
{
mergeSections: true,
mergeProps: false
}
);
app.use(PrimeVue, { unstyled: true, pt: CustomPreset });
mergeSections 定义是否添加来自主配置的部分，而 mergeProps 控制是覆盖还是合并定义的道具。mergeSections 的默认值为 true，而 mergeProps 的默认值为 false。
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: false }
);
// Output:
// panel.header.class => 'my_panel_header'
// panel.title.class => Tailwind.panel.title.class
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: true }
);
// Output:
// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
// panel.title.class => Tailwind.panel.title.class
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: true }
);
// Output:
// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
// panel.title.class => undefined
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: false }
);
// Output:
// panel.header.class => 'my_panel_header'
// panel.title.class => undefined