Button 按钮

常用的操作按钮，支持多种类型、尺寸和状态。

基础用法

使用 type 属性来定义按钮的样式。

<template>
  <ZcButton>默认按钮</ZcButton>
  <ZcButton type="primary">主要按钮</ZcButton>
  <ZcButton type="success">成功按钮</ZcButton>
  <ZcButton type="warning">警告按钮</ZcButton>
  <ZcButton type="danger">危险按钮</ZcButton>
  <ZcButton type="info">信息按钮</ZcButton>
</template>

按钮尺寸

通过 size 属性设置按钮大小。

<template>
  <ZcButton size="large" type="primary">大型按钮</ZcButton>
  <ZcButton size="medium" type="primary">中等按钮</ZcButton>
  <ZcButton size="small" type="primary">小型按钮</ZcButton>
  <ZcButton size="mini" type="primary">迷你按钮</ZcButton>
</template>

禁用状态

通过 disabled 属性设置按钮禁用状态。

<template>
  <ZcButton disabled>禁用按钮</ZcButton>
  <ZcButton type="primary" disabled>禁用按钮</ZcButton>
  <ZcButton type="success" disabled>禁用按钮</ZcButton>
</template>

加载状态

通过 loading 属性显示加载中状态。

<template>
  <ZcButton type="primary" loading>加载中</ZcButton>
</template>

圆角按钮

通过 round 属性设置圆角按钮。

<template>
  <ZcButton round>圆角按钮</ZcButton>
  <ZcButton type="primary" round>主要按钮</ZcButton>
  <ZcButton type="success" round>成功按钮</ZcButton>
</template>

朴素按钮

通过 plain 属性设置为朴素风格。

<template>
  <ZcButton plain>朴素按钮</ZcButton>
  <ZcButton type="primary" plain>主要按钮</ZcButton>
  <ZcButton type="success" plain>成功按钮</ZcButton>
  <ZcButton type="danger" plain>危险按钮</ZcButton>
</template>

Button API

参数	说明	类型	默认值
type	按钮类型	primary | success | warning | danger | info | default	default
size	按钮尺寸	large | medium | small | mini	medium
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
round	是否圆角	boolean	false
plain	是否朴素	boolean	false
icon	图标类名	string	—
nativeType	原生 type 属性	button | submit | reset	button

Events

事件名	说明	回调参数
click	点击按钮时触发	(event: MouseEvent)

Slots

插槽名	说明
default	按钮内容