Button 按钮

Button 概述

基础组件，触发业务逻辑时使用。

TIP

注意：非 template/render 模式下，需使用 h-button。

Button 代码演示

按钮类型

按钮类型有：默认按钮、主按钮、幽灵按钮、虚线按钮、文字按钮以及四种颜色按钮。
通过设置type为primary、ghost、dashed、text、info、success、warning、error、transparent创建不同样式的按钮，不设置为默认样式。

图标按钮及按钮形状

通过设置icon属性在Button内嵌入一个Icon，或者直接在Button内使用Icon组件。
使用Button的icon属性，图标位置将在最左边，如果需要自定义位置，需使用Icon组件。
通过设置shape属性为circle，可将按钮置为圆的形状。

按钮尺寸

按钮有三种尺寸：大、默认（中）、小。
通过设置size为large和small将按钮设置为大和小尺寸，不设置为默认（中）尺寸。

长按钮

通过设置属性 long 可将按钮宽度设置为 100%，常用于弹窗内操作按钮。
使用者也可以直接通过给组件添加 style 来设置更细节的样式，比如定宽。

button 的原生 type

通过设置属性 nativeType 设置为原生按钮样式，可选值有 button、submit、reset。

不可用状态

通过添加disabled属性可将按钮设置为不可用状态。

加载中状态

通过添加loading属性可以让按钮处于加载中状态，后两个按钮在点击时进入加载状态。

按钮组合

将多个Button放入ButtonGroup内，可实现按钮组合的效果。
通过设置ButtonGroup的属性size为large和small，可将按钮组尺寸设置为大和小，不设置size，则为默认（中）尺寸。
通过设置ButtonGroup的属性shape为circle，可将按钮组形状设置为圆角。

按钮组纵向排列

通过设置ButtonGroup的属性vertical，可以使按钮组纵向排列。

Button API

Button props

属性	说明	类型	默认值
type	按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error、transparent或者不设置	String	-
size	按钮大小，可选值为 large 和 small 或者不设置	String	-
shape	按钮形状，可选值为 circle 或者不设置	String	-
long	开启后，按钮的长度为 100%	Boolean	false
nativeType	设置 button 原生的 type，可选值为 button、submit、reset	String	button
disabled	设置按钮为禁用状态	Boolean	false
loading	设置按钮为加载中状态	Boolean	false
icon	设置按钮的图标类型	String	-
canFocus	设置表单是否可以获取焦点	Boolean	false
title	鼠标 hover 到 button 显示 title 文字信息(此属性只在 v1.0.16 版本以及以上有效)	String	--

Button methods

方法	说明
focus	通过 this.$refs.xxx.focus() 使用使当前按钮获取焦点（只在 canFocus 为 true 时有效）（此方法只在 1.0.9 版本后有效）

Button events

事件	说明
on-blur	失焦时回调事件 (v1.0.38)

ButtonGroup props

属性	说明	类型	默认值
size	按钮组合大小，可选值为 large 和 small 或者不设置	String	-
shape	按钮组合形状，可选值为 circle 或者不设置	String	-
vertical	是否纵向排列按钮组	Boolean	false