Button 按钮

用于触发一个操作，如提交表单、跳转页面等。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

按钮类型

按钮支持 default、primary、success、warning、danger、info 六种类型，默认为 default。

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

朴素按钮

通过 plain 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为透明。

<zq-button type="primary" plain text="朴素按钮" />

细边框

通过 hairline 属性设置细边框。

<zq-button type="primary" plain hairline text="细边框按钮" />

禁用状态

通过 disabled 属性禁用按钮，禁用状态下按钮不可点击。

<zq-button type="primary" disabled text="禁用状态" />

加载状态

通过 loading 属性设置按钮为加载状态，加载状态下按钮不可点击。

<zq-button type="primary" loading text="加载中" />

按钮形状

通过 round 设置圆角按钮，通过 square 设置方形按钮。

<zq-button type="primary" round text="圆角按钮" />
<zq-button type="primary" square text="方形按钮" />

按钮尺寸

支持 mini、small、normal、large 四种尺寸，默认为 normal。

<zq-button type="primary" size="mini" text="迷你" />
<zq-button type="primary" size="small" text="小型" />
<zq-button type="primary" size="normal" text="普通" />
<zq-button type="primary" size="large" text="大号" />

块级按钮

通过 block 属性将按钮设置为块级元素。

<zq-button type="primary" block text="块级按钮" />

图标按钮

通过 icon 属性设置按钮图标（使用 zq-icon 图标名称）。

<zq-button type="primary" icon="plus" text="新增" />
<zq-button type="primary" icon="search" />

通过插槽自定义内容

<zq-button type="primary">
  <text>自定义内容</text>
</zq-button>

API

Props

参数	说明	类型	默认值
type	按钮类型	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	'default'
size	按钮尺寸	'mini' | 'small' | 'normal' | 'large'	'normal'
text	按钮文字	string	''
icon	左侧图标名称	string	''
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
square	是否为方形按钮	boolean	false
block	是否为块级元素	boolean	false
disabled	是否禁用	boolean	false
loading	是否显示加载状态	boolean	false
hairline	是否使用细边框	boolean	false

Events

事件名	说明	回调参数
click	点击按钮时触发（loading 和 disabled 状态下不触发）	event: Event

Slots

名称	说明
default	按钮内容，优先级高于 text 属性

主题定制

组件使用以下 CSS 变量，可通过修改主题色来自定义样式：

变量名	说明
--color-primary	主要按钮背景色
--color-success	成功按钮背景色
--color-warning	警告按钮背景色
--color-error	危险按钮背景色
--color-info	信息按钮背景色
--color-bg-card	默认按钮背景色
--color-border	默认按钮边框色
--color-text-primary	默认按钮文字色
--color-text-disabled	禁用状态图标色