按钮 Button

常用的操作按钮。

基础用法

按钮的 type 分别为 primary、info、success、warning 和 error。

<template>
  <div class="demo-button">
    <b-button>Default</b-button>
    <b-button type="primary">Primary</b-button>
    <b-button type="success">Success</b-button>
    <b-button type="info">Info</b-button>
    <b-button type="warning">Warning</b-button>
    <b-button type="danger">Danger</b-button>
  </div>
</template>

<template>
  <div class="demo-button">
    <b-button>Default</b-button>
    <b-button type="primary">Primary</b-button>
    <b-button type="success">Success</b-button>
    <b-button type="info">Info</b-button>
    <b-button type="warning">Warning</b-button>
    <b-button type="danger">Danger</b-button>
  </div>
</template>

简约按钮

可以设置 plain 显示简约按钮

<template>
  <div class="demo-button">
    <b-button plain>Default</b-button>
    <b-button type="primary" plain>Primary</b-button>
    <b-button type="success" plain>Success</b-button>
    <b-button type="info" plain>Info</b-button>
    <b-button type="warning" plain>Warning</b-button>
    <b-button type="danger" plain>Danger</b-button>
  </div>
</template>

<template>
  <div class="demo-button">
    <b-button plain>Default</b-button>
    <b-button type="primary" plain>Primary</b-button>
    <b-button type="success" plain>Success</b-button>
    <b-button type="info" plain>Info</b-button>
    <b-button type="warning" plain>Warning</b-button>
    <b-button type="danger" plain>Danger</b-button>
  </div>
</template>

圆角按钮

可以设置 round 显示圆角按钮

<template>
  <div class="demo-button">
    <b-button round>Default</b-button>
    <b-button type="primary" round>Primary</b-button>
    <b-button type="success" round>Success</b-button>
    <b-button type="info" round>Info</b-button>
    <b-button type="warning" round>Warning</b-button>
    <b-button type="danger" round>Danger</b-button>
  </div>
</template>

<template>
  <div class="demo-button">
    <b-button round>Default</b-button>
    <b-button type="primary" round>Primary</b-button>
    <b-button type="success" round>Success</b-button>
    <b-button type="info" round>Info</b-button>
    <b-button type="warning" round>Warning</b-button>
    <b-button type="danger" round>Danger</b-button>
  </div>
</template>

虚线按钮

可以设置 dashed 显示虚线按钮

<template>
  <div class="demo-button">
    <b-button dashed>Default</b-button>
    <b-button type="primary" dashed>Primary</b-button>
    <b-button type="success" dashed>Success</b-button>
    <b-button type="info" dashed>Info</b-button>
    <b-button type="warning" dashed>Warning</b-button>
    <b-button type="danger" dashed>Danger</b-button>
  </div>
</template>

<template>
  <div class="demo-button">
    <b-button dashed>Default</b-button>
    <b-button type="primary" dashed>Primary</b-button>
    <b-button type="success" dashed>Success</b-button>
    <b-button type="info" dashed>Info</b-button>
    <b-button type="warning" dashed>Warning</b-button>
    <b-button type="danger" dashed>Danger</b-button>
  </div>
</template>

幽灵按钮

可以设置 transparent 开启透明背景的幽灵模式，用于有背景色的位置

<template>
  <div class="demo-button" style="background: #cad4d4; padding: 10px 6px">
    <b-button type="primary" transparent size="small">Primary</b-button>
    <b-button type="success" transparent size="small">Success</b-button>
    <b-button type="info" transparent size="small">Info</b-button>
    <b-button type="warning" transparent size="small">Warning</b-button>
    <b-button type="danger" transparent size="small">Danger</b-button>
  </div>
</template>

<template>
  <div class="demo-button" style="background: #cad4d4; padding: 10px 6px">
    <b-button type="primary" transparent size="small">Primary</b-button>
    <b-button type="success" transparent size="small">Success</b-button>
    <b-button type="info" transparent size="small">Info</b-button>
    <b-button type="warning" transparent size="small">Warning</b-button>
    <b-button type="danger" transparent size="small">Danger</b-button>
  </div>
</template>

带图标的按钮

使用 icon 给按钮配置图标

<template>
  <div class="demo-button">
    <b-button icon="search">search</b-button>
    <b-button icon="plus-circle">create</b-button>
    <b-button icon="check-circle" type="primary">check</b-button>
    <b-button icon="delete" type="danger">delete</b-button>
    <b-button icon="minus-circle"></b-button>
    <b-button icon="crown"></b-button>
    <b-button icon="crown" circle type="primary"></b-button>
    <b-button icon="crown" circle type="primary" plain></b-button>
  </div>
</template>

<template>
  <div class="demo-button">
    <b-button icon="search">search</b-button>
    <b-button icon="plus-circle">create</b-button>
    <b-button icon="check-circle" type="primary">check</b-button>
    <b-button icon="delete" type="danger">delete</b-button>
    <b-button icon="minus-circle"></b-button>
    <b-button icon="crown"></b-button>
    <b-button icon="crown" circle type="primary"></b-button>
    <b-button icon="crown" circle type="primary" plain></b-button>
  </div>
</template>

禁用状态

使用 disabled 设置禁用状态的按钮

<template>
  <div class="demo-button" flex="cross:center">
    <b-button disabled>Default</b-button>
    <b-button dashed disabled>Dashed</b-button>
    <b-button background disabled>Background</b-button>
    <b-button type="primary" disabled>Primary</b-button>
    <b-button type="success" disabled>Success</b-button>
    <b-button type="info" disabled>Info</b-button>
    <b-button type="warning" disabled>Warning</b-button>
    <b-button type="danger" disabled>Danger</b-button>
  </div>
</template>

<template>
  <div class="demo-button" flex="cross:center">
    <b-button disabled>Default</b-button>
    <b-button dashed disabled>Dashed</b-button>
    <b-button background disabled>Background</b-button>
    <b-button type="primary" disabled>Primary</b-button>
    <b-button type="success" disabled>Success</b-button>
    <b-button type="info" disabled>Info</b-button>
    <b-button type="warning" disabled>Warning</b-button>
    <b-button type="danger" disabled>Danger</b-button>
  </div>
</template>

文字状态按钮

使用 type="text" 设置仅文字的按钮

<template>
  <div class="demo-button">
    <div>
      <b-button type="text">文字按钮</b-button>
      <b-button type="text" text-color="primary">Primary</b-button>
      <b-button type="text" text-color="success">Success</b-button>
      <b-button type="text" text-color="info">Info</b-button>
      <b-button type="text" text-color="warning">Warning</b-button>
      <b-button type="text" text-color="danger">Danger</b-button>
      <b-button type="text" text-color="#b37feb">多彩按钮</b-button>
      <b-button type="text" text-color="#f759ab">多彩按钮2</b-button>
    </div>
    <div>
      <b-button type="text" disabled>禁用按钮</b-button>
      <b-button type="text" text-color="primary" disabled>Primary</b-button>
      <b-button type="text" text-color="success" disabled>Success</b-button>
      <b-button type="text" text-color="info" disabled>Info</b-button>
      <b-button type="text" text-color="warning" disabled>Warning</b-button>
      <b-button type="text" text-color="danger" disabled>Danger</b-button>
      <b-button type="text" text-color="#b37feb" disabled>多彩按钮</b-button>
      <b-button type="text" text-color="#f759ab" disabled>多彩按钮2</b-button>
    </div>
  </div>
</template>

<template>
  <div class="demo-button">
    <div>
      <b-button type="text">文字按钮</b-button>
      <b-button type="text" text-color="primary">Primary</b-button>
      <b-button type="text" text-color="success">Success</b-button>
      <b-button type="text" text-color="info">Info</b-button>
      <b-button type="text" text-color="warning">Warning</b-button>
      <b-button type="text" text-color="danger">Danger</b-button>
      <b-button type="text" text-color="#b37feb">多彩按钮</b-button>
      <b-button type="text" text-color="#f759ab">多彩按钮2</b-button>
    </div>
    <div>
      <b-button type="text" disabled>禁用按钮</b-button>
      <b-button type="text" text-color="primary" disabled>Primary</b-button>
      <b-button type="text" text-color="success" disabled>Success</b-button>
      <b-button type="text" text-color="info" disabled>Info</b-button>
      <b-button type="text" text-color="warning" disabled>Warning</b-button>
      <b-button type="text" text-color="danger" disabled>Danger</b-button>
      <b-button type="text" text-color="#b37feb" disabled>多彩按钮</b-button>
      <b-button type="text" text-color="#f759ab" disabled>多彩按钮2</b-button>
    </div>
  </div>
</template>

按钮组

使用 button-group 组件包裹后可显示按钮组

<template>
  <div class="demo-button" flex="cross:center">
    <b-button-group vertical>
      <b-button>小样</b-button>
      <b-button>你</b-button>
      <b-button>瞅啥</b-button>
    </b-button-group>

    <b-button-group vertical>
      <b-button>我就</b-button>
      <b-button>瞅你</b-button>
      <b-button>咋地</b-button>
    </b-button-group>

    <b-button-group>
      <b-button type="primary" icon="left">上一页</b-button>
      <b-button type="primary">
        下一页
        <i class="b-iconfont b-icon-right"></i>
      </b-button>
    </b-button-group>
    <b-button-group>
      <b-button>上一页</b-button>
      <b-button>下一页</b-button>
    </b-button-group>
    <b-button-group>
      <b-button type="success" icon="star"></b-button>
      <b-button type="info" icon="heatmap"></b-button>
      <b-button type="danger" icon="edit"></b-button>
    </b-button-group>
  </div>
</template>

<template>
  <div class="demo-button" flex="cross:center">
    <b-button-group vertical>
      <b-button>小样</b-button>
      <b-button>你</b-button>
      <b-button>瞅啥</b-button>
    </b-button-group>

    <b-button-group vertical>
      <b-button>我就</b-button>
      <b-button>瞅你</b-button>
      <b-button>咋地</b-button>
    </b-button-group>

    <b-button-group>
      <b-button type="primary" icon="left">上一页</b-button>
      <b-button type="primary">
        下一页
        <i class="b-iconfont b-icon-right"></i>
      </b-button>
    </b-button-group>
    <b-button-group>
      <b-button>上一页</b-button>
      <b-button>下一页</b-button>
    </b-button-group>
    <b-button-group>
      <b-button type="success" icon="star"></b-button>
      <b-button type="info" icon="heatmap"></b-button>
      <b-button type="danger" icon="edit"></b-button>
    </b-button-group>
  </div>
</template>

不同尺寸

设置 size 不同尺寸

<template>
  <div class="demo-button">
    <b-button size="large">不小</b-button>
    <b-button>正好</b-button>
    <b-button size="small">小</b-button>
    <b-button size="mini">小迷你</b-button>
  </div>
</template>

<template>
  <div class="demo-button">
    <b-button size="large">不小</b-button>
    <b-button>正好</b-button>
    <b-button size="small">小</b-button>
    <b-button size="mini">小迷你</b-button>
  </div>
</template>

加载状态

设置 loading 加载状态

<template>
  <div class="demo-button" flex="cross:center">
    <b-button type="primary" :loading="loading" icon="reload" @click="loading = true">
      Click me!
    </b-button>
    <b-button @click="loading = false">stop</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
</script>

<template>
  <div class="demo-button" flex="cross:center">
    <b-button type="primary" :loading="loading" icon="reload" @click="loading = true">
      Click me!
    </b-button>
    <b-button @click="loading = false">stop</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
</script>

点击反馈

可以设置 v-waves 指令来更改点击反馈动画

<template>
  <div class="demo-button">
    <b-button>Normal Animation</b-button>
    <b-button type="danger">Normal Animation</b-button>
    <b-button v-waves>Waves Animation</b-button>
    <b-button v-waves type="success">Waves Animation</b-button>
  </div>
</template>

<template>
  <div class="demo-button">
    <b-button>Normal Animation</b-button>
    <b-button type="danger">Normal Animation</b-button>
    <b-button v-waves>Waves Animation</b-button>
    <b-button v-waves type="success">Waves Animation</b-button>
  </div>
</template>

Props

参数	说明	类型	可选值	默认值
size	尺寸	String	large / small / mini	—
type	类型	String	primary / success / warning / danger / info / text	—
plain	简单按钮	Boolean	—	false
round	圆角按钮	Boolean	—	false
circle	圆形按钮	Boolean	—	false
transparent	透明按钮	Boolean	—	false
loading	加载中	Boolean	—	false
disabled	禁用状态	Boolean	—	false
background	拟物背景（仅供默认按钮使用）	Boolean	—	false
icon	图标	String	—	—
icon-style	可设置图标大小	Object	—	—
text-color	文字按钮颜色	String	primary / success / warning / danger / info / text / 自定义色值	—
autofocus	是否默认聚焦	Boolean	—	false
native-type	原生 type 属性	String	button / submit / reset	button

按钮 Button ​

基础用法 ​

简约按钮 ​

圆角按钮 ​

虚线按钮 ​

幽灵按钮 ​

带图标的按钮 ​

禁用状态 ​

文字状态按钮 ​

按钮组 ​

不同尺寸 ​

加载状态 ​

点击反馈 ​

Props ​

Props ​

按钮 Button

基础用法

简约按钮

圆角按钮

虚线按钮

幽灵按钮

带图标的按钮

禁用状态

文字状态按钮

按钮组

不同尺寸

加载状态

点击反馈

Props

Props