PrimeVue 的应用程序全局配置。
配置由从 primevue/config 导入的 PrimeVue 实例管理。
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, { /* 选项 */ });
样式模式提供基于设计令牌架构的主题化。查看 样式模式 文档了解详细信息，如构建自己的主题。
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
});
无样式模式指示组件不添加任何内置样式类，以便可以使用自定义 CSS 或 Tailwind 和 Bootstrap 等库进行样式设置。访问 无样式模式 文档了解更多信息。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { unstyled: true });
定义每个组件类型的共享透传属性。访问 透传属性 文档了解更多信息。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
pt: {
slider: {
handle: { class: 'bg-primary text-primary-contrast' }
}
}
});
用于配置组件的 ptOptions 属性和 usePassThrough 方法。mergeSections 定义是否添加主配置中的部分，mergeProps 控制是否覆盖或合并定义的属性。默认值为 mergeSections 为 true，mergeProps 为 false。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
ptOptions: {
mergeSections: true,
mergeProps: false
}
});
涟漪效果是支持的组件（如按钮）的可选动画。默认情况下它是禁用的，需要在 PrimeVue 设置期间在应用程序的入口文件（如 main.js）中启用。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { ripple: true });
输入字段有两种样式，默认是带边框的 outlined 样式，而 filled 替代样式会为字段添加背景色。将 p-variant-filled 应用到输入框的祖先元素上可以启用填充样式。如果您希望在整个应用程序中使用填充输入框，请使用全局容器（如文档主体或应用程序元素）来应用样式类。请注意，如果您将其添加到应用程序元素上， 传送到文档主体的组件（如 Dialog）将无法显示填充输入框，因为它们在 DOM 树中不是应用程序根元素的后代，要解决这种情况，请在 PrimeVue 配置中将 inputVariant 设置为 filled。
import {createApp} from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { inputVariant: "filled" });
ZIndex 会自动管理，以确保在组合多个组件时覆盖组件的分层能够无缝工作。但仍可能存在您希望配置默认值的情况，例如标题部分固定的自定义布局。在这种情况下，下拉菜单需要显示在应用程序标题下方，但模态对话框应显示在上方。PrimeVue 配置提供了 zIndex 属性来自定义 组件类别的默认值。默认值如下所述，可以在设置 PrimeVue 时进行自定义。
import {createApp} from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
zIndex: {
modal: 1100, //对话框, 抽屉
overlay: 1000, //选择器, 弹出框
menu: 1000, //覆盖菜单
tooltip: 1100 //工具提示
}
});
在核心中动态生成的样式元素上使用的 nonce 值。
app.use(PrimeVue, {
csp: {
nonce: '...'
}
});
use 函数的第二个参数可用于在 PrimeVue 安装期间初始化本地化设置。
app.use(PrimeVue, {
locale: {
accept: 'Aceptar',
reject: 'Rechazar',
//...
}
});
本地化配置是响应式的，因此任何更改都会立即反映在 UI 中。假设您正在开发多语言应用程序并需要动态更改语言。
import { defineComponent, onMounted } from "vue";
import { usePrimeVue } from "primevue/config";
export default defineComponent({
setup() {
const changeToSpanish = () => {
const primevue = usePrimeVue();
primevue.config.locale.accept = "Aceptar";
primevue.config.locale.reject = "Rechazar";
}
onMounted(() => {
changeToSpanish();
})
}
});
可直接使用的本地化设置可在社区支持的 PrimeLocale 仓库中获得。如果您能通过拉取请求为此仓库做出贡献并与社区其他成员分享，我们将不胜感激。
配置由从 primevue/config 导入的 Locale API 管理。
| Key | Value |
|---|---|
| startsWith | Starts with |
| contains | Contains |
| notContains | Not contains |
| endsWith | Ends with |
| equals | Equals |
| notEquals | Not equals |
| noFilter | No Filter |
| lt | Less than |
| lte | Less than or equal to |
| gt | Greater than |
| gte | Greater than or equal to |
| dateIs | Date is |
| dateIsNot | Date is not |
| dateBefore | Date is before |
| dateAfter | Date is after |
| clear | Clear |
| apply | Apply |
| matchAll | Match All |
| matchAny | Match Any |
| addRule | Add Rule |
| removeRule | Remove Rule |
| accept | Yes |
| reject | No |
| choose | Choose |
| upload | Upload |
| cancel | Cancel |
| completed | Completed |
| pending | Pending |
| fileSizeTypes | ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] |
| dayNames | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' |
| dayNamesShort | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' |
| dayNamesMin | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' |
| monthNames | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' |
| monthNamesShort | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' |
| chooseYear | Choose Year |
| chooseMonth | Choose Month |
| chooseDate | Choose Date |
| prevDecade | Previous Decade |
| nextDecade | Next Decade |
| prevYear | Previous Year |
| nextYear | Next Year |
| prevMonth | Previous Month |
| nextMonth | Next Month |
| prevHour | Previous Hour |
| nextHour | Next Hour |
| prevMinute | Previous Minute |
| nextMinute | Next Minute |
| prevSecond | Previous Second |
| nextSecond | Next Second |
| am | am |
| pm | pm |
| today | Today |
| weekHeader | Wk |
| firstDayOfWeek | 0 |
| showMonthAfterYear | false |
| dateFormat | mm/dd/yy |
| weak | Weak |
| medium | Medium |
| strong | Strong |
| passwordPrompt | Enter a password |
| searchMessage | {0} results are available |
| selectionMessage | {0} items selected |
| emptySelectionMessage | No selected item |
| emptySearchMessage | No results found |
| fileChosenMessage | {0} files |
| noFileChosenMessage | No file chosen |
| emptyMessage | No available options |
| aria.trueLabel | True |
| aria.falseLabel | False |
| aria.nullLabel | Not Selected |
| aria.star | 1 star |
| aria.stars | {star} stars |
| aria.selectAll | All items selected |
| aria.unselectAll | All items unselected |
| aria.close | Close |
| aria.previous | Previous |
| aria.next | Next |
| aria.navigation | Navigation |
| aria.scrollTop | Scroll Top |
| aria.moveTop | Move Top |
| aria.moveUp | Move Up |
| aria.moveDown | Move Down |
| aria.moveBottom | Move Bottom |
| aria.moveToTarget | Move to Target |
| aria.moveToSource | Move to Source |
| aria.moveAllToTarget | Move All to Target |
| aria.moveAllToSource | Move All to Source |
| aria.pageLabel | Page {page} |
| aria.firstPageLabel | First Page |
| aria.lastPageLabel | Last Page |
| aria.nextPageLabel | Next Page |
| aria.prevPageLabel | Previous Page |
| aria.rowsPerPageLabel | Rows per page |
| aria.jumpToPageDropdownLabel | Jump to Page Dropdown |
| aria.jumpToPageInputLabel | Jump to Page Input |
| aria.selectRow | Row Selected |
| aria.unselectRow | Row Unselected |
| aria.expandRow | Row Expanded |
| aria.collapseRow | Row Collapsed |
| aria.showFilterMenu | Show Filter Menu |
| aria.hideFilterMenu | Hide Filter Menu |
| aria.filterOperator | Filter Operator |
| aria.filterConstraint | Filter Constraint |
| aria.editRow | Row Edit |
| aria.saveEdit | Save Edit |
| aria.cancelEdit | Cancel Edit |
| aria.listView | List View |
| aria.gridView | Grid View |
| aria.slide | Slide |
| aria.slideNumber | {slideNumber} |
| aria.zoomImage | Zoom Image |
| aria.zoomIn | Zoom In |
| aria.zoomOut | Zoom Out |
| aria.rotateRight | Rotate Right |
| aria.rotateLeft | Rotate Left |