Button 按钮

常用的操作按钮。

基础用法

使用 type、plain、 round和 circle来定义按钮的样式。

<template>
  <p>
    <c-button>Default</c-button>
    <c-button type="primary">Primary</c-button>
    <c-button type="success">Success</c-button>
    <c-button type="info">Info</c-button>
    <c-button type="warning">Warning</c-button>
    <c-button type="danger">Danger</c-button>
  </p>

  <p>
    <c-button plain>Plain</c-button>
    <c-button type="primary" plain>Primary</c-button>
    <c-button type="success" plain>Success</c-button>
    <c-button type="info" plain>Info</c-button>
    <c-button type="warning" plain>Warning</c-button>
    <c-button type="danger" plain>Danger</c-button>
  </p>

  <p>
    <c-button round>Round</c-button>
    <c-button type="primary" round>Primary</c-button>
    <c-button type="success" round>Success</c-button>
    <c-button type="info" round>Info</c-button>
    <c-button type="warning" round>Warning</c-button>
    <c-button type="danger" round>Danger</c-button>
  </p>

  <p>
    <c-button icon="search" circle />
    <c-button type="primary" icon="edit" circle />
    <c-button type="success" icon="check" circle />
    <c-button type="info" icon="message" circle />
    <c-button type="warning" icon="star" circle />
    <c-button type="danger" icon="trash" circle />
  </p>
</template>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

图标按钮

使用 icon属性来定义按钮的图标。

按钮组

使用 <c-button-group> 对多个按钮分组。

按钮尺寸

使用 size属性来定义按钮的尺寸。

Tag

可以自定义元素标签。例如，按钮，div，路由链接，nuxt 链接。

节流模式

可以通过 useThrottle 属性来定义按钮是否使用节流模式 默认为 true。

Button API

Props

Name	Description	Type	Default
size	尺寸	enum - 'large'| 'default'| 'small'	—
type	类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	info
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
disabled	按钮是否为禁用状态	boolean	false
icon	按钮图标	string	-
autofocus	是否自动聚焦(原生autofocus属性)	boolean	false
native-type	原生 type 属性	enum - 'button'| 'submit'| 'reset'	button
tag	自定义元素标签	string/Component	button
use-throttle	是否使用节流模式	boolean	true
throttle-duration	节流模式下，节流时间间隔(ms)	number	500

Events

Name	Description	Type
click	按钮点击事件	(event: MouseEvent)=> void

Slots

Name	Description
default	默认插槽, 按钮内容

Expose

Name	Description	Type
ref	按钮 html 元素	Ref<HTMLButtonElement>
size	按钮尺寸	ComputedRef<''|'small' |'large'>
type	按钮类型	ComputedRef<''|'primary' |...>
disabled	按钮禁用状态	ComputedRef<boolean>

ButtonGroup API

Props

Name	Description	Type	Default
size	尺寸	enum - 'large'| 'default'| 'small'	—
type	类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	info
disabled	按钮组是否为禁用状态	boolean	false

Slots

Name	Description	Sub Component
default	默认插槽	Button