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
}
});
涟漪效果是支持的组件（如按钮）的可选动画。默认情况下处于禁用状态，需要在 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, //dialog, drawer
overlay: 1000, //select, popover
menu: 1000, //overlay menus
tooltip: 1100 //tooltip
}
});
要在核心中动态生成的样式元素上使用的随机数值。
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 管理。
| 键 | 值 |
|---|---|
| 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 | Upload |
| 取消 | 取消 |
| completed | 已完成 |
| pending | 待处理 |
| fileSizeTypes | ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] |
| dayNames | ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] |
| dayNamesShort | ['日', '一', '二', '三', '四', '五', '六'] |
| dayNamesMin | ['日', '一', '二', '三', '四', '五', '六'] |
| monthNames | ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
| monthNamesShort | ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
| chooseYear | 选择年份 |
| chooseMonth | 选择月份 |
| chooseDate | 选择日期 |
| prevDecade | 上一个十年 |
| nextDecade | 下一个十年 |
| prevYear | 上一年 |
| nextYear | 下一年 |
| prevMonth | 上个月 |
| nextMonth | 下个月 |
| prevHour | 上一个小时 |
| nextHour | 下一个小时 |
| prevMinute | 上一分钟 |
| nextMinute | 下一分钟 |
| prevSecond | 上一秒 |
| nextSecond | 下一秒 |
| am | am |
| 下午 | 下午 |
| 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 | 向左旋转 |