按钮

在表单、对话框等中使用 Bootstrap 的自定义 b-button 组件来进行操作。包括对少数上下文变体、尺寸、状态等的 supports。

概述

BootstrapVue 的 <b-button> 组件生成一个 <button> 元素、<a> 元素或 <router-link> 组件，其样式为按钮。

<div>
  <b-button>Button</b-button>
  <b-button variant="danger">Button</b-button>
  <b-button variant="success">Button</b-button>
  <b-button variant="outline-primary">Button</b-button>
</div>

<!-- b-button.vue -->

元素类型

<b-button> 组件通常会呈现一个 <button> 元素。但是，你也可以通过提供一个 href 属性值来呈现一个 <a> 元素。当为 to 属性提供一个值时，你还可以生成 vue-router <router-link>（需要 vue-router）。

<div>
  <b-button>I am a Button</b-button>
  <b-button href="#">I am a Link</b-button>
</div>

<!-- b-button-types.vue -->

类型

你可以通过将属性 type 设置为 'button'、'submit' 或 'reset' 来指定按钮的类型。默认类型为 'button'。

请注意，当设置 href 或 to 属性时，type 属性不起作用。

尺寸

想要更大或更小的按钮？通过 size 属性指定 lg 或 sm。

<b-row>
  <b-col lg="4" class="pb-2"><b-button size="sm">Small Button</b-button></b-col>
  <b-col lg="4" class="pb-2"><b-button>Default Button</b-button></b-col>
  <b-col lg="4" class="pb-2"><b-button size="lg">Large Button</b-button></b-col>
</b-row>

<!-- b-button-sizes.vue -->

上下文变体

使用 variant 属性来生成各种 Bootstrap 上下文按钮变体。

默认情况下，<b-button> 将使用 secondary 变体进行呈现。

variant 属性会在呈现的按钮上添加 Bootstrap v4.3 类 .btn-<variant>。

纯色变体

primary、secondary、success、danger、warning、info、light 和 dark。

<div>
  <b-button variant="primary">Primary</b-button>
  <b-button variant="secondary">Secondary</b-button>
  <b-button variant="success">Success</b-button>
  <b-button variant="danger">Danger</b-button>
  <b-button variant="warning">Warning</b-button>
  <b-button variant="info">Info</b-button>
  <b-button variant="light">Light</b-button>
  <b-button variant="dark">Dark</b-button>
</div>

<!-- b-button-solid.vue -->

轮廓色变体

需要一个按钮，但不需要它们带来的厚重的背景颜色？使用 outline-* 变体来移除任何 <b-button> 上的所有背景图像和颜色。

outline-primary、outline-secondary、outline-success、outline-danger、outline-warning、outline-info、outline-light 和 outline-dark。

<div>
  <b-button variant="outline-primary">Primary</b-button>
  <b-button variant="outline-secondary">Secondary</b-button>
  <b-button variant="outline-success">Success</b-button>
  <b-button variant="outline-danger">Danger</b-button>
  <b-button variant="outline-warning">Warning</b-button>
  <b-button variant="outline-info">Info</b-button>
  <b-button variant="outline-light">Light</b-button>
  <b-button variant="outline-dark">Dark</b-button>
</div>

<!-- b-button-outline.vue -->

链接变体

变体 link 将呈现一个按钮，该按钮的外观为链接，同时保持按钮的默认填充和大小。

<div>
  <b-button variant="link">Link</b-button>
</div>

<!-- b-button-link.vue -->

提示：通过将 Bootstrap v4.3 实用程序类 text-decoration-none 添加到 <b-button>，从链接变体按钮中删除悬停下划线。

块级按钮

通过设置 block 属性，创建块级按钮，即跨越父级全宽的按钮。

<div>
  <b-button block variant="primary">Block Level Button</b-button>
</div>

<!-- b-button-block.vue -->

药丸样式

更喜欢更圆润的药丸样式按钮？只需将属性 pill 设置为 true 即可。

<div>
  <b-button pill>Button</b-button>
  <b-button pill variant="primary">Button</b-button>
  <b-button pill variant="outline-secondary">Button</b-button>
  <b-button pill variant="success">Button</b-button>
  <b-button pill variant="outline-danger">Button</b-button>
  <b-button pill variant="info">Button</b-button>
</div>

<!-- b-button-pill.vue -->

此属性在呈现的按钮上添加 Bootstrap v4.3 实用程序类 .rounded-pill。

方形样式

更喜欢更方形的按钮样式？只需将属性 squared 设置为 true 即可。

<div>
  <b-button squared>Button</b-button>
  <b-button squared variant="primary">Button</b-button>
  <b-button squared variant="outline-secondary">Button</b-button>
  <b-button squared variant="success">Button</b-button>
  <b-button squared variant="outline-danger">Button</b-button>
  <b-button squared variant="info">Button</b-button>
</div>

<!-- b-button-square.vue -->

属性 squared 在呈现的按钮上添加 Bootstrap v4.3 实用程序类 .rounded-0。属性 pill 优先于属性 squared。

禁用状态

设置 disabled 属性以禁用按钮的默认功能。disabled 也适用于呈现为 <a> 元素和 <router-link>（即设置 href 或 to 属性）的按钮。

<div>
  <b-button disabled size="lg" variant="primary">Disabled</b-button>
  <b-button disabled size="lg">Also Disabled</b-button>
</div>

<!-- b-button-disabled.vue -->

按下状态和切换

当属性 pressed 设置为 true 时，按钮将显示为按下状态（背景更暗，边框更暗，阴影内嵌）。

属性 pressed 可以设置为三个值之一

true：设置 .active 类并添加属性 aria-pressed="true"。
false：清除 .active 类并添加属性 aria-pressed="false"。
null：默认值，既不会设置类 .active，也不会设置属性 aria-pressed。

要创建一个可以在活动和非活动状态之间切换的按钮，请在 pressed 属性上使用 .sync prop 修饰符（在 Vue 2.3+ 中可用）

<template>
  <div>
    <h5>Pressed and un-pressed state</h5>
    <b-button :pressed="true" variant="success">Always Pressed</b-button>
    <b-button :pressed="false" variant="success">Not Pressed</b-button>

    <h5 class="mt-3">Toggleable Button</h5>
    <b-button :pressed.sync="myToggle" variant="primary">Toggle Me</b-button>
    <p>Pressed State: <strong>{{ myToggle }}</strong></p>

    <h5>In a button group</h5>
    <b-button-group size="sm">
      <b-button
        v-for="(btn, idx) in buttons"
        :key="idx"
        :pressed.sync="btn.state"
        variant="primary"
      >
        {{ btn.caption }}
      </b-button>
    </b-button-group>
    <p>Pressed States: <strong>{{ btnStates }}</strong></p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myToggle: false,
        buttons: [
          { caption: 'Toggle 1', state: true },
          { caption: 'Toggle 2', state: false },
          { caption: 'Toggle 3', state: true },
          { caption: 'Toggle 4', state: false }
        ]
      }
    },
    computed: {
      btnStates() {
        return this.buttons.map(btn => btn.state)
      }
    }
  }
</script>

<!-- b-button-toggles.vue -->

如果为单选按钮或复选框样式的界面使用切换按钮样式，则最好使用 <b-form-radio-group> 和 <b-form-checkbox-group> 的内置 button 样式支持。

路由链接支持

有关各种受支持 <router-link> 相关 prop，请参阅 路由器支持 参考文档。

辅助功能

当 href prop 设置为 '#' 时，<b-button> 将呈现一个链接（<a>）元素，并设置属性 role="button" 和适当的 keydown 侦听器（Enter 和 Space），以便该链接对屏幕阅读器和仅键盘用户来说就像一个本机 HTML <button>。禁用时，aria-disabled="true" 属性将设置在 <a> 元素上。

当 href 设置为任何其他值（或使用 to prop）时，将不会添加 role="button"，也不会启用键盘事件侦听器。

另请参阅

组件参考

`<b-button>`

功能组件

查看源代码

<b-button> 组件别名
<b-button> 属性
<b-button> 插槽
<b-button> 事件

组件别名

<b-button> 还可以通过以下别名使用

<b-btn>

注意：仅当导入所有 BootstrapVue 或使用组件组插件时，组件别名才可用。

属性

所有属性默认值均可全局配置。

属性（单击按升序排列）	类型（单击按升序排列）	默认值	描述
`active`	`布尔值`	`false`	设置为 `true` 时，将组件置于活动状态并采用活动样式
`active-class`	`字符串`		<router-link> 属性：配置链接处于活动状态时应用的活动 CSS 类。通常，您需要将其设置为类名“active”
`append`	`布尔值`	`false`	<router-link> 属性：设置 append 属性始终将相对路径追加到当前路径
`block`	`布尔值`	`false`	渲染一个 100% 宽度按钮（扩展到其父容器的宽度）
`disabled`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`exact`	`布尔值`	`false`	<router-link> 属性：默认活动类匹配行为是包含匹配。设置此属性会强制模式与路由完全匹配
`exact-active-class`	`字符串`		<router-link> 属性：配置链接在完全匹配时处于活动状态时应用的活动 CSS 类。通常，您需要将其设置为类名“active”
`exact-path`	`布尔值`	`false`	<router-link> 属性：允许仅使用 url 的路径部分进行匹配，有效地忽略查询和哈希部分
`exact-path-active-class`	`字符串`		<router-link> 属性：当链接在精确路径匹配时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
`href`	`字符串`		<b-link> 属性：表示标准 a 链接的目标 URL
`no-prefetch`	`布尔值`	`false`	<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分的页面。设置 `no-prefetch` 将禁用特定链接的此功能
`pill`	`布尔值`	`false`	当设置为“true”时，以药丸样式外观呈现按钮
`prefetch` v2.15.0+	`布尔值`	`null`	<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分的页面。将 `prefetch` 设置为 `true` 或 `false` 将覆盖 `router.prefetchLinks` 的默认值
`pressed`	`布尔值`	`null`	当设置为“true”时，使按钮呈现为按下状态并添加属性“aria-pressed="true"”。当设置为“false”时，添加属性“aria-pressed="false"”。三态属性。可与 .sync 修饰符同步
`rel`	`字符串`	`null`	<b-link> 属性：设置呈现的链接上的“rel”属性
`replace`	`布尔值`	`false`	<router-link> 属性：设置 replace 属性将在单击时调用 `router.replace()` 而不是 `router.push()`，因此导航不会留下历史记录
`router-component-name` v2.15.0+	`字符串`		<b-link> 属性：BootstrapVue 会自动检测 `<router-link>` 和 `<nuxt-link>`。如果您想使用基于 `<router-link>` 的第三方链接组件，请将此属性设置为组件名称。例如，如果您正在使用 Gridsome，请将其设置为“g-link”（注意，只有 `<router-link>` 特定的属性才会传递给组件）
`size`	`字符串`		设置组件外观的大小。“sm”、“md”（默认）或“lg”
`squared`	`布尔值`	`false`	当设置为“true”时，以非圆角呈现按钮
`tag`	`字符串`	`'button'`	指定要呈现的 HTML 标记，而不是默认标记
`target`	`字符串`	`'_self'`	<b-link> 属性：设置呈现的链接上的“target”属性
`to`	`Object` 或 `String`		<router-link> 属性：表示链接的目标路由。单击时，to 属性的值将在内部传递给 `router.push()`，因此该值可以是字符串或 Location 描述符对象
`类型`	`字符串`	`'button'`	用于设置按钮“type”属性的值。可以是“button”、“submit”或“reset”之一
`变体`	`字符串`	`“secondary”`	将 Bootstrap 主题颜色变体之一应用于组件

<b-button> 支持生成 <router-link> 或 <nuxt-link> 组件（如果使用 Nuxt.js）。有关路由链接（或 nuxt 链接）特定属性的更多详细信息，请参阅路由支持参考部分。

插槽

名称	描述
`默认`	放置在按钮中的内容

事件

事件	参数	描述
`click`	原生点击事件对象	在非禁用按钮被点击时发出

`<b-button-close>`

功能组件

查看源代码

<b-button-close> 组件别名
<b-button-close> 属性
<b-button-close> 插槽
<b-button-close> 事件

组件别名

<b-button-close> 还可以通过以下别名使用

<b-btn-close>

注意：仅当导入所有 BootstrapVue 或使用组件组插件时，组件别名才可用。

属性

所有属性默认值均可全局配置。

属性	类型	默认值	描述
`aria-label`	`字符串`	`“关闭”`	设置渲染元素上“aria-label”属性的值
`content` v2.3.0+	`字符串`	`“×”`	关闭按钮的内容
`disabled`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`text-variant`	`字符串`		将 Bootstrap 主题颜色变体之一应用于文本

插槽

名称	描述
`默认`	放置在按钮中的内容。覆盖“content”属性

事件

事件	参数	描述
`click`	原生点击事件对象	在非禁用按钮被点击时发出

导入单个组件

您可以通过以下命名导出将单个组件导入到您的项目中

组件	命名导出	导入路径
`<b-button>`	`BButton`	`bootstrap-vue`
`<b-button-close>`	`BButtonClose`	`bootstrap-vue`

示例

import { BButton } from 'bootstrap-vue'
Vue.component('b-button', BButton)

作为 Vue.js 插件导入

此插件包含上述列出的所有单独组件。插件还包括任何组件别名。

命名导出	导入路径
`ButtonPlugin`	`bootstrap-vue`

示例

import { ButtonPlugin } from 'bootstrap-vue'
Vue.use(ButtonPlugin)