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" });
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: '...'
}
});
使用函式的第二個參數可用於在 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 |
| 下午 | 下午 |
| 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 | 向左旋轉 |