PrimeVue 的应用程序小部件配置。
配置由从 primevue/config 导入的 PrimeVue 实例管理。
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, { /* options */ });
样式模式提供基于设计令牌架构的主题。有关详细信息，例如构建自己的主题，请参见 样式模式 文档。
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
});
无样式模式指示组件不要添加任何内置样式类，以便可以使用自定义 css 或库（如 Tailwind、Bootstrap 或 PrimeFlex）对其进行样式设置。有关更多信息，请访问 无样式模式 文档。
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
}
});
涟漪是支持组件（如按钮）的可选动画。它默认情况下处于禁用状态，需要在应用程序的入口文件（例如 main.js）中，在 PrimeVue 设置期间启用。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { ripple: true });
输入字段有两种样式，默认值为 outlined，在字段周围带有边框，而 filled 替代方案会在字段中添加背景颜色。将 p-variant-filled 应用于输入的祖先会启用填充样式。如果您希望在整个应用程序中使用填充输入，请使用全局容器（例如文档主体或应用程序元素）来应用样式类。请注意，如果您将其添加到应用程序元素，则被传送到文档主体的组件（如对话框）将无法显示填充输入，因为它们在 DOM 树中不是应用程序根元素的后代，要解决这种情况，请将 inputVariant 设置为 PrimeVue 配置中的 filled。
import {createApp} from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { inputVariant: "filled" });
ZIndexes 会自动管理，以确保叠加组件的层叠在组合多个组件时能顺利工作。但仍然可能存在您想要配置默认值的情况，例如自定义布局，其中标题部分是固定的。在这种情况下，下拉菜单需要显示在应用程序标题下方，但模态对话框应该显示在上面。PrimeVue 配置提供 zIndex 属性来自定义组件类别的默认值。下面描述了默认值，可以在设置 PrimeVue 时自定义。
import {createApp} from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
zIndex: {
modal: 1100, //dialog, drawer
overlay: 1000, //select, popover
menu: 1000, //overlay menus
tooltip: 1100 //tooltip
}
});
核心动态生成的样式元素要使用的 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 导入的语言环境 API 管理。
| 键 | 值 |
|---|---|
| startsWith | 以…开头 |
| contains | 包含 |
| notContains | 不包含 |
| endsWith | 以…结尾 |
| equals | 等于 |
| notEquals | 不等于 |
| noFilter | 无过滤器 |
| lt | 小于 |
| lte | 小于或等于 |
| gt | 大于 |
| gte | 大于或等于 |
| dateIs | 日期是 |
| dateIsNot | 日期不是 |
| dateBefore | 日期在之前 |
| dateAfter | 日期在之后 |
| clear | 清除 |
| apply | 应用 |
| matchAll | 匹配所有 |
| matchAny | 匹配任何 |
| addRule | 添加规则 |
| removeRule | 删除规则 |
| accept | 是 |
| reject | 否 |
| choose | 选择 |
| upload | 上传 |
| cancel | 取消 |
| completed | 已完成 |
| pending | 待定 |
| fileSizeTypes | ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] |
| dayNames | ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] |
| dayNamesShort | ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] |
| dayNamesMin | ['日', '一', '二', '三', '四', '五', '六'] |
| monthNames | ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
| monthNamesShort | ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
| chooseYear | 选择年份 |
| chooseMonth | 选择月份 |
| chooseDate | 选择日期 |
| prevDecade | 上一个十年 |
| nextDecade | 下一个十年 |
| prevYear | 上一年 |
| nextYear | 下一年 |
| prevMonth | 上一个月 |
| nextMonth | 下一个月 |
| prevHour | 上一个小时 |
| nextHour | 下一个小时 |
| prevMinute | 上一分钟 |
| nextMinute | 下一分钟 |
| prevSecond | 上一秒 |
| nextSecond | 下一秒 |
| am | am |
| pm | pm |
| today | 今天 |
| weekHeader | 周 |
| firstDayOfWeek | 0 |
| showMonthAfterYear | false |
| dateFormat | mm/dd/yy |
| weak | 弱 |
| medium | 中等 |
| strong | 强 |
| passwordPrompt | 输入密码 |
| searchMessage | 有 {0} 个结果可用 |
| selectionMessage | 已选择 {0} 项 |
| emptySelectionMessage | 未选择任何项目 |
| emptySearchMessage | 未找到结果 |
| fileChosenMessage | {0} 个文件 |
| noFileChosenMessage | 未选择任何文件 |
| emptyMessage | 没有可用选项 |
| aria.trueLabel | 真 |
| aria.falseLabel | 假 |
| aria.nullLabel | 未选择 |
| aria.star | 1 星 |
| aria.stars | {star} 星 |
| aria.selectAll | 已选择所有项目 |
| aria.unselectAll | 已取消选择所有项目 |
| aria.close | 关闭 |
| aria.previous | 上一个 |
| aria.next | 下一个 |
| aria.navigation | 导航 |
| aria.scrollTop | 滚动到顶部 |
| aria.moveTop | 移至顶部 |
| aria.moveUp | 向上移动 |
| aria.moveDown | 向下移动 |
| aria.moveBottom | 移至底部 |
| aria.moveToTarget | 移至目标 |
| aria.moveToSource | 移至来源 |
| aria.moveAllToTarget | 全部移至目标 |
| aria.moveAllToSource | 全部移至来源 |
| aria.pageLabel | 第 {page} 页 |
| aria.firstPageLabel | 首页 |
| aria.lastPageLabel | 尾页 |
| aria.nextPageLabel | 下一页 |
| aria.prevPageLabel | 上一页 |
| aria.rowsPerPageLabel | 每页行数 |
| aria.jumpToPageDropdownLabel | 跳转到页面下拉菜单 |
| aria.jumpToPageInputLabel | 跳转到页面输入 |
| aria.selectRow | 选中行 |
| aria.unselectRow | 取消选中行 |
| aria.expandRow | 展开行 |
| aria.collapseRow | 折叠行 |
| aria.showFilterMenu | 显示筛选菜单 |
| aria.hideFilterMenu | 隐藏筛选菜单 |
| aria.filterOperator | 筛选运算符 |
| aria.filterConstraint | 筛选条件 |
| aria.editRow | 编辑行 |
| aria.saveEdit | 保存编辑 |
| aria.cancelEdit | 取消编辑 |
| aria.listView | 列表视图 |
| aria.gridView | 网格视图 |
| aria.slide | 幻灯片 |
| aria.slideNumber | {slideNumber} |
| aria.zoomImage | 缩放图片 |
| aria.zoomIn | 放大 |
| aria.zoomOut | 缩小 |
| aria.rotateRight | 向右旋转 |
| aria.rotateLeft | 向左旋转 |