Button 按钮

常用的操作按钮。

基础用法

查看代码

<template>
	<demo-container>
		<div>
			<gov-button>默认按钮</gov-button>
			<gov-button type="primary">主要按钮</gov-button>
			<gov-button type="success">成功按钮</gov-button>
			<gov-button type="info">信息按钮</gov-button>
			<gov-button type="warning">警告按钮</gov-button>
			<gov-button type="danger">危险按钮</gov-button>
		</div>
		<br />
		<div>
			<gov-button plain>默认按钮</gov-button>
			<gov-button plain type="primary">主要按钮</gov-button>
			<gov-button plain type="success">成功按钮</gov-button>
			<gov-button plain type="info">信息按钮</gov-button>
			<gov-button plain type="warning">警告按钮</gov-button>
			<gov-button plain type="danger">危险按钮</gov-button>
		</div>
		<br />
		<div>
			<gov-button round>默认按钮</gov-button>
			<gov-button round type="primary">主要按钮</gov-button>
			<gov-button round type="success">成功按钮</gov-button>
			<gov-button round type="info">信息按钮</gov-button>
			<gov-button round type="warning">警告按钮</gov-button>
			<gov-button round type="danger">危险按钮</gov-button>
		</div>
		<br />
		<div>
			<gov-button icon="edit">默认按钮</gov-button>
			<gov-button type="primary" icon="edit">主要按钮</gov-button>
			<gov-button icon="search" plain circle />
			<gov-button type="primary" icon="delete" circle />
			<gov-button type="text">文字按钮</gov-button>
		</div>
	</demo-container>
</template>

不同尺寸

查看代码

<template>
	<demo-container>
		<gov-button size="large">大按钮</gov-button>
		<gov-button size="default">默认按钮</gov-button>
		<gov-button size="small">小按钮</gov-button>
	</demo-container>
</template>

禁用状态

查看代码

<template>
	<demo-container>
		<div>
			<gov-button disabled>主要按钮</gov-button>
			<gov-button disabled type="success">成功按钮</gov-button>
			<gov-button disabled type="info">信息按钮</gov-button>
			<gov-button disabled type="warning">警告按钮</gov-button>
			<gov-button disabled type="danger">危险按钮</gov-button>
		</div>
		<br />
		<div>
			<gov-button disabled plain>主要按钮</gov-button>
			<gov-button disabled plain type="success">成功按钮</gov-button>
			<gov-button disabled plain type="info">信息按钮</gov-button>
			<gov-button disabled plain type="warning">警告按钮</gov-button>
			<gov-button disabled plain type="danger">危险按钮</gov-button>
		</div>
	</demo-container>
</template>

加载中

操作完毕以后，可以在按钮上显示加载状态。

查看代码

<template>
	<demo-container>
		<gov-button type="primary" loading>加载中</gov-button>
	</demo-container>
</template>

文字按钮

设置 type='text' 时显示文字按钮样式。

查看代码

<template>
	<demo-container>
		<gov-button type="text">文字按钮</gov-button>
		<gov-button type="text" disabled>文字按钮</gov-button>
	</demo-container>
</template>

按钮组

可设置按钮组来组合按钮。

查看代码

<template>
	<demo-container>
		<gov-button-group>
			<gov-button type="primary">按钮组</gov-button>
			<gov-button type="primary">按钮组</gov-button>
			<gov-button type="success">按钮组</gov-button>
		</gov-button-group>
		<br />
		<br />
		<gov-button-group>
			<gov-button type="primary" round>按钮组</gov-button>
			<gov-button type="primary" round>按钮组</gov-button>
			<gov-button type="warning" round>按钮组</gov-button>
		</gov-button-group>
		<br />
		<br />
		<gov-button-group>
			<gov-button type="primary" icon="user-solid" circle />
			<gov-button type="primary" icon="edit" circle>按钮组</gov-button>
			<gov-button type="primary" icon="s-tools" circle />
		</gov-button-group>
	</demo-container>
</template>

Attributes

属性	说明	类型	可选值	默认值
size	尺寸	string	large / default / small	—
type	类型	string	primary / success / warning / danger / info / text	—
label	按钮文字	string	-	—
plain	是否朴素按钮	boolean	—	false
round	是否圆角按钮	boolean	—	false
circle	是否圆形按钮	boolean	—	false
loading	是否加载中状态	boolean	—	false
disabled	是否禁用状态	boolean	—	false
icon	图标名	string	—	—
autofocus	是否默认聚焦	boolean	—	false
native-type	原生 type 属性	string	button / submit / reset	—

Slots

插槽名	说明
default	用于放置按钮的label文本，可以放置任何自定义的内容，例如文本、图标或其他 HTML 结构。

Events

事件名	说明
click	点击事件。