Skip to content

Button 按钮

常用的操作按钮。

基础用法

查看代码
vue
<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>

不同尺寸

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

禁用状态

查看代码
vue
<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>

加载中

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

查看代码
vue
<template>
	<demo-container>
		<gov-button type="primary" loading>加载中</gov-button>
	</demo-container>
</template>

文字按钮

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

查看代码
vue
<template>
	<demo-container>
		<gov-button type="text">文字按钮</gov-button>
		<gov-button type="text" disabled>文字按钮</gov-button>
	</demo-container>
</template>

按钮组

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

查看代码
vue
<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尺寸stringlarge / default / small
type类型stringprimary / success / warning / danger / info / text
label按钮文字string-
plain是否朴素按钮booleanfalse
round是否圆角按钮booleanfalse
circle是否圆形按钮booleanfalse
loading是否加载中状态booleanfalse
disabled是否禁用状态booleanfalse
icon图标名string
autofocus是否默认聚焦booleanfalse
native-type原生 type 属性stringbutton / submit / reset

Slots

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

Events

事件名说明
click点击事件。

Released under the MIT License.