設定

BootstrapVue 提供一些選項，可自訂元件預設值，以及更多功能。

設定預設值

BootstrapVue 預設為 Bootstrap v4.x 預設設定。假設斷點是 xs、sm、md、lg和 xl等標準斷點名稱。此外，不同的 BootstrapVue 元件有包含預設變體和文字內容的 prop。

BootstrapVue 提供多種方法，可變更預設設定。

請注意，當透過 <script> 標籤使用 BootstrapVue 時，無法變更預設值。

預設設定

預設斷點名稱儲存在 breakpoints 屬性中，而所有其他共用元件設定（例如 formControls）都列在下方。

特定元件的預設值是以其 PascalCase 名稱為索引鍵，而 prop 則為 camelCase 屬性。

{
  // Breakpoint configuration
  "breakpoints": ["xs", "sm", "md", "lg", "xl"],

  // Shared component configuration
  "formControls": {
    "disabled": undefined,
    "required": false,
    "form": undefined,
    "autofocus": false,
    "plain": false,
    "size": undefined
  },
  "formOptionControls": {
    "options": [],
    "valueField": "value",
    "textField": "text",
    "htmlField": "html",
    "disabledField": "disabled"
  },
  "formRadioCheckGroups": {
    "validated": false,
    "ariaInvalid": false,
    "stacked": false,
    "buttons": false,
    "buttonVariant": undefined,
    "plain": false
  },
  "formRadioCheckControls": {
    "value": undefined,
    "checked": undefined,
    "inline": false,
    "button": false,
    "buttonVariant": undefined,
    "ariaLabel": undefined,
    "ariaLabelledby": undefined,
    "plain": false
  },
  "formState": {
    "state": null
  },
  "formTextControls": {
    "value": "",
    "ariaInvalid": false,
    "readonly": false,
    "plaintext": false,
    "autocomplete": undefined,
    "placeholder": undefined,
    "formatter": undefined,
    "lazyFormatter": false,
    "trim": false,
    "number": false,
    "lazy": false,
    "debounce": 0
  },

  // Component configuration
  "BAlert": {
    "variant": "info"
    // ...
  }
  // ...
}

設定新的設定值

當您 Vue.use(BootstrapVue) 時，您可以選擇性地傳遞一個設定物件，用於指定要取代預設值的新值。舉例來說，如果您希望定義新的中斷點名稱（會在元件上產生合適的屬性，例如 <b-col> 和 <b-form-group>），讓新的中斷點為 ['aa', 'bb', 'cc', 'dd']，那麼 <b-col> 現在會有 bb、cc 和 dd 屬性，而不是 sm、md、lg 和 xl 屬性（於 <b-form-group> 上的 label-cols-{breakpoint} 和 label-align-{breakpoint} 屬性類似的作法）

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue, {
  breakpoints: [`xs`, 'sm', 'md', 'lg', 'xl', 'xxl']
})

或當要變更 <b-button> 和 <b-alert> 的預設變異時

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue, {
  BAlert: { variant: 'danger' },
  BButton: { variant: 'primary' }
})

提供給 Vue.use config 選項的值會與預設值合併。

請注意：在定義自訂中斷點時，請將名稱簡短（2 至 3 個字元）。必須定義至少 2 個中斷點名稱。中斷點名稱必須與自訂 Bootstrap SCSS 中定義的中斷點名稱相符。中斷點名稱不得與各個元件上使用的非中斷點屬性名稱產生衝突（例如，避免使用 to、col 等）

透過個別元件群組外掛程式匯入設定 config

在匯入個別元件外掛程式時，您也可以指定 config（使用上記相同的 config 結構。您只需對匯入的第一個元件提供組態，但後續的每個 config 都會與先前提供的 config 合併。

請注意，中斷點名稱應該在使用任何元件之前定義，因為它們需要產生元件中斷點專屬屬性。一旦已使用具有中斷點專屬屬性的元件，後續對中斷點的變更不會反映在其中。

範例 1（最不推薦的方法）

import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'

// Supply configs via each plugin as it is `Vue.use()`'d
Vue.use(LayoutPlugin, { breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'] })
Vue.use(AlertPlugin, { BAlert: { variant: 'danger' } })
Vue.use(ButtonPlugin, { BButton: { variant: 'primary' } })

範例 2

import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'

// Supply complete config to first `Vue.use()`'d plugin
Vue.use(LayoutPlugin, {
  breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'],
  BAlert: { variant: 'danger' },
  BButton: { variant: 'primary' }
})
Vue.use(AlertPlugin)
Vue.use(ButtonPlugin)

範例 3（最推薦的方法）

import { BVConfigPlugin, LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'

// Supply complete config to the BVConfigPlugin helper plugin
Vue.use(BVConfigPlugin, {
  breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'],
  BAlert: { variant: 'danger' },
  BButton: { variant: 'primary' }
})

// Then use component plugins
Vue.use(LayoutPlugin)
Vue.use(AlertPlugin)
Vue.use(ButtonPlugin)

範例 4 匯入個別元件時（推薦的方法）

import { BVConfigPlugin, BAlert, BButton, BRow, BCol } from 'bootstrap-vue'

// Supply complete config to the BVConfig helper plugin
Vue.use(BVConfigPlugin, {
  breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'],
  BAlert: { variant: 'danger' },
  BButton: { variant: 'primary' }
})

// Then install components globally
Vue.component('BAlert', BAlert)
Vue.component('BButton', BButton)
Vue.component('BRow', BRow)
Vue.component('BCol', BCol)

// Or register components as local to your custom component
export default {
  name: 'MyComponent',
  components: {
    BAlert,
    BButton,
    BRow,
    BCol
  }
  // ...
}

注意： Vue 只會安裝外掛程式一次。如果您匯入了一個已被其他元件外掛程式匯入的外掛程式，則傳遞給該元件外掛程式的設定不會合併。最好的作法是使用 BVConfigPlugin 輔助外掛程式設定完整的設定，如上述的範例 3和範例 4 所示。應該在應用程式的進入點中使用 BVConfigPlugin 外掛程式，而且必須在任何元件外掛程式或 Vue.component() 或個別元件的 Vue.use() 之前這麼做。

透過 Nuxt.js 模組設定 config

請參閱入門文件，以取得有關傳遞設定物件至 BootstrapVue Nuxt.js 模組的資訊。

停用主控台警告

當您嘗試使用已棄用屬性，或將無效值傳遞給特定屬性時，BootstrapVue 會透過 console.warn() 發出警告。這些警告旨在幫助您確保應用程式使用正確的屬性和值。

BootstrapVue 會在生產模式中自動停用警告（NODE_ENV=production）。如果您不想在其他情況下發出警告（不建議這麼做），可以透過設定下列處理程序環境變數達成此目的

process.env.BOOTSTRAP_VUE_NO_WARN = true

如果您忽略警告，您可能會發現專案在使用已移除已棄用屬性的 BootstrapVue 未來版本時會失敗/中斷。

在將你的專案推往正式環境前應修正警告！