按钮

常用的操作按钮。

基础用法

<cb-button>默认按钮</cb-button>
<cb-button theme="primary">主要按钮</cb-button>
<cb-button theme="success">成功按钮</cb-button>
<cb-button theme="info">信息按钮</cb-button>
<cb-button theme="warning">警告按钮</cb-button>
<cb-button theme="danger">危险按钮</cb-button>

禁用状态

<cb-button disabled>默认按钮</cb-button>
<cb-button theme="primary" disabled>主要按钮</cb-button>
<cb-button theme="success" disabled>成功按钮</cb-button>
<cb-button theme="info" disabled>信息按钮</cb-button>
<cb-button theme="warning" disabled>警告按钮</cb-button>
<cb-button theme="danger" disabled>危险按钮</cb-button>

不同尺寸

<cb-button large>超大按钮</cb-button>
<cb-button>默认按钮</cb-button>
<cb-button small>小型按钮</cb-button>
<cb-button tiny>超小按钮</cb-button>

块状按钮

<cb-button block>块状按钮</cb-button>
<cb-button block flat>平面块状按钮</cb-button>

单按钮下拉菜单

<cb-button>
  默认按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="primary">
  主要按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="success">
  成功按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="info">
  信息按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="warning">
  警告按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="danger">
  危险按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

分裂式按钮下拉菜单

<cb-button split>
  默认按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="primary" split>
  主要按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="success" split>
  成功按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="info" split>
  信息按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="warning" split>
  警告按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

<cb-button theme="danger" split>
  危险按钮
  <template slot="menu">
    <cb-menu-item>菜单1</cb-menu-item>
    <cb-menu-item>菜单2</cb-menu-item>
    <cb-menu-item>菜单3</cb-menu-item>
    <cb-menu-item separator></cb-menu-item>
    <cb-menu-item>菜单4</cb-menu-item>
  </template>
</cb-button>

属性

参数 说明 类型 可选值 默认值
theme 按钮风格或类型 string default / primary / success / info / warning / danger default
href 目标链接地址。设置此值后点击按钮直接跳转到这个地址。 string — —
params 目标链接地址的 query string 格式的参数。设置 href 后，可以通过这个属性传递 URL 参数，会自动进行 URL Encode，可以放心使用 object — —
to 路由目标地址。此属性与 <router-link> 的 to 接收相同的值，设置此值后点击按钮直接做路由跳转。 string / object — —
disabled 是否禁用状态 boolean — false
large 是否超大按钮 boolean — false
small 是否小型按钮 boolean — false
tiny 是否超小按钮 boolean — false
block 是否块状按钮 boolean — false
flat 是否平面按钮 boolean — false
split 是否分裂式按钮下拉菜单。只用于按钮式下拉菜单中。 boolean — false
dropup 是否向上弹出下拉菜单 boolean — false

插槽

名称 说明
menu 下拉菜单项。例如：<cb-menu-item>菜单项</cb-menu-item>

事件

名称 说明
click 单击事件