docs_vue2/one/docs/components/button.md

Button 按钮

示例

风格

可选的风格 ui 属性值：primary/strong/translucent/text/icon。

尺寸

可选的尺寸 ui 属性值：xs/s/m/l/xl。

禁用状态

设置 disabled 来使按钮处于禁用状态。

加载状态

设置 loading 来使按钮处于加载状态，无法点击。

API

属性

名称	类型	默认值	描述
ui	string=	-	[^ui]
disabled	boolean=	false	是否为禁用状态。
type	string=	'button'	[^type]
loading	boolean=	false	是否处于加载状态。加载状态下按钮不响应用户交互。

^^^ui 预设样式。为空格分隔的一组枚举值的组合。

+++枚举值

值	描述
normal	普通按钮，为默认样式。
primary	主要按钮，背景显示为主题色。
basic	基础按钮。
strong	加强样式。可单独使用，也可配合 text/icon 样式使用。
translucent	半透明样式，用于深色背景。
text	纯文字样式，没有背景色及边框。
icon	纯图标样式，没有背景色及边框。
aux	辅助按钮，用于配合 text/icon 样式使用。
square	方形按钮。可配合其它样式一同使用。
xs	超小尺寸样式。
s	小尺寸样式。
m	中尺寸样式。
l	大尺寸样式。
xl	超大尺寸样式。
+++
^^^

^^^type 按钮类型。参见原生 <button> 元素的 type。

+++枚举值

值	描述
button	普通按钮。
submit	提交按钮，点击会触发外部表单提交。
reset	重置按钮，点击会触发外部表单重置为初始值。
+++

:::warning 注意，默认值与原生 <button> 元素不同。需要触发表单提交时请显式设置为 submit。 ::: ^^^

插槽

名称	描述
default	按钮上显示的内容。

事件

Button 组件支持所有原生 <button> 元素支持的原生事件，回调函数的参数均为相应的原生事件对象。

图标

名称	描述
loading	加载状态。