设置

BootstrapVue 提供了一些选项，用于自定义组件默认值等。

配置默认值

BootstrapVue 已针对默认 Bootstrap v4.x 配置进行了预配置。它假定断点是 xs、sm、md、lg 和 xl 的标准断点名称。此外，各种 BootstrapVue 组件都具有具有默认变体和文本内容的道具。

BootstrapVue 提供了几种更改默认配置的方法。

请注意，通过 <script> 标记使用 BootstrapVue 时无法更改默认值。

默认配置

默认断点名称存储在 breakpoints 属性中，所有其他共享组件配置（如 formControls）都列在下面。

组件特定默认值以其 PascalCase 名称作为键，道具作为 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 个字符）。至少必须定义两个断点名称。断点名称必须与在自定义 Bootstrap SCSS 中定义的断点名称匹配。断点名称不得与各种组件上使用的非断点 prop 名称冲突（即避免 to、col 等）

通过单独的组件组插件导入设置配置

导入单独的组件插件时，您还可以指定一个配置（使用与上面相同的配置结构。您只需向导入的第一个组件提供配置，但每个后续配置都将与提供的先前配置合并。

请注意，断点名称应在使用任何组件之前定义，因为它们是生成组件断点特定 prop 所必需的。一旦使用了具有断点特定 prop 的组件，对断点的后续更改将不会反映出来。

示例 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 模块设置配置

有关将配置对象传递给 BootstrapVue Nuxt.js 模块的信息，请参阅入门文档。

禁用控制台警告

当您尝试使用已弃用的 prop 或向某些 prop 传递无效值时，BootstrapVue 会通过 console.warn() 警告。提供这些警告是为了帮助您确保应用程序使用正确的 prop 和值。

BootstrapVue 会在生产模式（NODE_ENV=production）下自动禁用警告。如果您想在其他情况下禁用警告（不推荐），可以通过设置以下进程环境变量来实现

process.env.BOOTSTRAP_VUE_NO_WARN = true

忽略警告后，您可能会发现，在使用已删除已弃用 prop 的 BootstrapVue 未来版本时，您的项目会失败/中断。

在将项目投入生产之前，应更正警告！