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 树中应用程序根元素的后代，要解决这种情况，请在 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 | 上传 |
| 上传 | cancel |
| 取消 | 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 |
| 上午 | pm |
| 下午 | today |
| 今天 | 0 |
| weekHeader | 周 |
| firstDayOfWeek | 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.saveEdit | 保存编辑 |
| aria.cancelEdit | 取消编辑 |
| aria.listView | 列表视图 |
| aria.gridView | 网格视图 |
| aria.slide | 幻灯片 |
| aria.slideNumber | {slideNumber} |
| aria.zoomImage | 缩放图像 |
| aria.zoomIn | 放大 |
| aria.zoomOut | 缩小 |
| aria.rotateRight | 向右旋转 |
| aria.rotateLeft | 向左旋转 |