Button 按钮

按钮用来触发一些操作

演示

基础

按钮的 type 分为 default, primary, secondary, minor, dashed, link, text, underlined。

<script lang="ts"></script>
<template>
  <div>
    <div class="row">
      <cl-button>Default</cl-button>
      <cl-button type="primary">Primary</cl-button>
      <cl-button type="secondary">Secondary</cl-button>
      <cl-button type="minor">Minor</cl-button>
      <cl-button type="dashed">Dashed</cl-button>
    </div>
    <br />
    <div class="row">
      <cl-button type="link">Link</cl-button>
      <cl-button type="text">Text</cl-button>
      <cl-button type="underlined">Underlined</cl-button>
    </div>
  </div>
</template>
<style scoped>
.row {
  display: flex;
  .cl-button {
    margin-right: 8px;
  }
}
</style>

尺寸

按钮的 size 分为 small, medium(default), large。

<script lang="ts"></script>
<template>
  <div>
    <div class="row">
      <cl-button size="small" type="default">Small Button</cl-button>
      <cl-button size="medium" type="primary">Medium Button</cl-button>
      <cl-button size="large" type="secondary">Large Button</cl-button>
    </div>
  </div>
</template>
<style scoped>
.row {
  display: flex;
  .cl-button {
    margin-right: 8px;
  }
}
</style>

按钮组

水平按钮组

<script lang="ts"></script>
<template>
  <div>
    <div>
      <cl-button-group>
        <cl-button type="default">Button-1</cl-button>
        <cl-button type="primary">Button-2</cl-button>
        <cl-button type="secondary">Button-3</cl-button>
      </cl-button-group>
    </div>
    <br />
    <div>
      <cl-button-group size="small" vertical="true">
        <cl-button type="default">Button-1</cl-button>
        <cl-button type="primary">Button-2</cl-button>
        <cl-button type="secondary">Button-3</cl-button>
      </cl-button-group>
    </div>
  </div>
</template>

场景

按钮的scene分为 default, info, warning

<script lang="ts"></script>
<template>
  <div>
    <div class="row">
      <cl-button type="default">Default Button</cl-button>
      <cl-button type="secondary" scene="info">Info Secondary Button</cl-button>
      <cl-button type="minor" scene="warning">Warning Minor Button</cl-button>
    </div>
    <br />
    <div class="row">
      <cl-button type="text" scene="info">Text Info Button</cl-button>
      <cl-button type="link" scene="warning">Link Warnging Button</cl-button>
    </div>
  </div>
</template>
<style scoped>
.row {
  display: flex;
  .cl-button {
    margin-right: 8px;
  }
}
</style>

加载

Loading

<script lang="ts"></script>
<template>
  <div>
    <div>
      <cl-button type="default" loading>Loading Button</cl-button>
    </div>
  </div>
</template>

自定义颜色, 块级按钮, 圆形按钮

Color, TextColor, block, round

<script lang="ts"></script>
<template>
  <div>
    <div>
      <cl-button type="default" color="green" textColor="white">Customize Color Button</cl-button>
    </div>
    <br />
    <div>
      <cl-button type="default" block>Block Button</cl-button>
    </div>
    <br />
    <div>
      <cl-button type="primary" round>Round Button</cl-button>
    </div>
  </div>
</template>

API

Button Props

名称	类型	默认值	描述
type	'default'｜'primary'｜ 'secondary'｜ 'minor'｜ 'dashed'｜ 'link'｜ 'text'｜ 'underlined'	'default'， 按钮默认的属性	按钮类型
size	'small'｜ 'medium'｜ 'large'	'medium'	按钮高度变化
scene	'normal'｜ 'info'｜ 'warning'	'normal'	按钮使用场景, 改变按钮颜色,红色. warning 影响到secondary, minor, text, link, underline; info 仅影响到text, link, underline
color	string		指定按钮颜色（支持形如 #FFF， #FFFFFF， yellow，rgb(0, 0, 0) 的颜色）
textColor	string		按钮文字颜色（支持形如 #FFF， #FFFFFF， yellow，rgb(0, 0, 0) 的颜色）
loading	boolean	false	按钮是否显示加载状态
disabled	boolean	false	按钮是否禁用
round	boolean	false	按钮是否显示圆角
icon	string		按钮上的icon名称, iconfont
iconColor	string		按钮上的icon的填充颜色

ButtonGroup Props

名称	类型	默认值	描述
size	'small'｜ 'medium'｜ 'large'	'medium'	按钮高度变化

Button Slots

名称	参数	描述
default	()	按钮内容

Button Group Slots

名称	参数	描述
default	()	按钮组内容

Button Event

名称	参数	描述
click		按钮点击事件