按钮(Button)

使用Bootstrap定义的 b-button 组件执行表单、对话框等操作。包括对一些上下文变化、大小、状态等的支持。

<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> 组件通常呈现 <button> 元素。但是，您也可以通过提供 href 属性值来渲染 <a> 元素。为to属性提供一个值时 (vue-router 是必须的)，您也可以生成 vue-router <router-link>。

I am a Link

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

类型

您可以通过将 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>

上下文变量

使用 variant 属性生成各种引导上下文按钮。

默认情况下， <b-button> 将会以 次要 变量形式呈现。

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>

轮廓颜色变量

需要一个按钮，而不是他们带来的深重的背景颜色? 使用 outline-* 变量，来删除任何 <b-button> 背景图片和颜色:

outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light and 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>

链接变量

变量 link 将渲染具有链接外观的按钮，同时保持按钮的默认填充和大小。

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

提示： 通过向<b-button>添加 Bootstrap v4.3 实用工具类 text-decoration-none 来从链接变量按钮中移除悬停下划线。

块级按钮

创建块级按钮 — 跨越父级的整个宽度的按钮 — 通过设置 block 属性。

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

药丸风格

更喜欢圆润的药丸风格的按钮？把 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>

该属性添加了 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>

此 squared 属性添加了 Bootstrap v4.3 实用程序类。 .rounded-0 在按钮上渲染。 pill 属性优先于 squared 属性。

禁用状态

将 disabled 属性设置为禁用按钮默认功能。 disabled也可以渲染在<a> 元素和 <router-link> 上(i.e. 与 href 或 to 属性设置)。

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

按下状态和切换

当 pressed 属性被设置为 true 时，按钮将会显示为按下（带有较暗的背景、较暗的边框和嵌入的阴影）。

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

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

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

Pressed and un-pressed state

Toggleable Button

Pressed State: false

In a button group

Pressed States: [ true, false, true, false ]

<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-form-radio-group> 和 <b-form-checkbox-group> 的内置 button 样式支持。

路由器连接支持

参考 路由器支持 文档，了解各种支持的 <router-link> 相关属性。

注意， <router-link> 属性 tag 在 bootstrap-vue 中被称作 router-tag 。

可访问性

当 href 属性被设置为 '#'时, <b-button> 将渲染一个link (<a>) 元素，该元素的属性 role="button" 被设置，并且有适当的keydown监听器 (Enter 和 Space) 这样该链接对于屏幕阅读器和键盘用户来说就像一个原生的HTML <button>，当禁用时，将在 <a> 元素上设置 aria-disabled="true" 属性。

当 href 被设置为任何其他值 (或使用 to 属性)， role="button" 将不会添加，也不会启用键盘事件监听器。

另请参阅

组件引用

`<b-button>`

功能组件

View source

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

组件别名

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

<b-btn>

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

属性

属性 (Click to sort Ascending)	类型	默认值	描述
`href`	String		表示标准a链接的目标URL
`rel`	String		设置渲染链接上的'rel'属性
`target`	String	`'_self'`	在渲染的链接上设置'target'属性
`active`	Boolean	`false`	当设置为“true”时，将组件置于活动状态，并使用活动样式
`disabled`	Boolean	`false`	当设置为“true”时，将禁用组件的功能并将其置于禁用状态
`to`	String or Object		router-link 属性: 表示链路的目标路由。单击时，to 属性的值将在内部传递给router.push()，因此该值可以是字符串，也可以是位置描述符对象
`append`	Boolean	`false`	router-link 属性: 设置追加属性始终将相对路径追加到当前路径
`replace`	Boolean	`false`	router-link 属性: 点击时，替换道具会调用“router.replace()”而不是“router.push()”，这样导航就不会留下历史记录
`event`	String or Array	`'click'`	router-link 属性: 指定触发链接的事件。在大多数情况下，您应该保持默认设置
`active-class`	String		router-link 属性: 配置链接处于活动状态时应用的活动CSS类。通常你会想要将这个设置为类名“active”
`exact`	Boolean	`false`	router-link 属性: 默认的活动类匹配行为是包含匹配。设置此道具将强制模式精确匹配路线
`exact-active-class`	String		router-link 属性: 配置活动的CSS类应用时，链接是活动的与精确匹配。通常你会想要将这个设置为类名“active”
`router-tag`	String	`'a'`	router-link 属性: 指定要呈现哪个标记，它仍然会侦听用于导航的单击事件。“router-tag”解析为最终呈现的router-link上的标签属性。通常应该使用默认值
`no-prefetch`	Boolean	`false`	nuxt-link 属性: 为了提高Nuxt.js应用程序的响应能力，当链接在viewport中显示时，Nuxt.js会自动预取分离页面的代码。设置‘no-prefetch’将禁用特定链接的此功能
`block`	Boolean	`false`	呈现一个100%宽度的按钮(扩展为其父容器的宽度)
`size`	String		设置组件外观的大小。“sm”、“md”(默认)或“lg”'
`variant`	String	`'secondary'`	将一个引导主题颜色变量应用于组件
`type`	String	`'button'`	将按钮的“type”属性设置为的值。可以是'button'， 'submit'或'reset'中的一个
`tag`	String	`'button'`	指定要渲染的HTML标记，而不是默认标记
`pill`	Boolean	`false`	当设置为‘true’时，渲染带有药丸样式外观的按钮
`squared`	Boolean	`false`	当设置为“true”时，显示带有非圆角的按钮
`pressed`	Boolean		当设置为‘true’时，会给按钮一种被按下的感觉。使用.sync修改器进行同步

<b-button> 支持生成 <router-link> 或 <nuxt-link> 组件(如果使用Nuxt.js)。有关路由器链接(或nuxt link)特定道具的详细信息，请参阅路由器支持参考部分。

事件

事件	参数	描述
`click`	Native click event object	当非禁用按钮单击时发出

`<b-button-close>`

功能组件

查看源代码

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

Component aliases

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

<b-btn-close>

注意:组件别名仅在导入所有BootstrapVue或使用组件组插件时可用。

属性

属性	类型	默认值	描述
`content` v2.3.0+	String	`'×'`	关闭按钮的内容
`disabled`	Boolean	`false`	当设置为“true”时，将禁用组件的功能并将其置于禁用状态
`aria-label`	String	`'Close'`	在渲染的元素上设置'aria-label'属性的值
`text-variant`	String		将一个引导主题颜色变量应用于文本

事件

事件	参数	描述
`click`	Native click event object	当非禁用按钮单击时发出

导入单个组件

您可以通过以下指定的导出将各个组件导入到您的项目中：

组件	命名输出	导入路径
`<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)