official/public/docset/ui/wc-button.md

WC-BUTTON

常用的按钮组件。

基础用法

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js' Primary Button Info Button Success Button Warning Button Normal Button Help Button Secondary Button Danger Button

尺寸大小

6种尺寸规则的按钮, 如果不满足自己的需求, 可以自行设置width和height。

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js' xxxl Size xxl Size xl Size Deault Size Medium Size small Size

颜色&样式&形状

可通过设置type属性修改按钮样式, 还可通过solid属性将按钮改成实心, 另外, round和circle这2个属性, 可以让按钮变成圆角和圆形。

如果有其他半径需求, 可以直接通过css设置border-radius。

注: circle属性会让移除掉按钮内文字, 只能用图标

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js' type=info type=info type=info type=info 圆角矩形

状态

按钮有2种状态, loading 和 disabled, 这2种状态下, 都不能点击, 也无法获取焦点。

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js' Loading Status Disabled Status Loading Status Disabled Status

图标

按钮可通过icon属性, 增加前置图标, 图标的名字, 参考前面的章节。

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js' 编辑 删除 静态菊花图标 动态加载图标 提交

完整APIs

属性	值类型	默认值	描述
type	String	无	按钮类型, 仅能决定按钮的颜色, 无额外作用, 可选值有: primary、info、success、warning、default、secondary、danger
size	String	default	按钮尺寸, 可选值有: xxxl、xxl、xl、l、m、s
loading	Boolean	false	按钮的加载状态, 为true时, 按钮会呈现loading动画, 且按钮点击事件无效
disbaled	Boolean	false	按钮的禁用状态, 为true时, 按钮点击事件无效
icon	String	无	为按钮设置前置图标
round	无	无	为按钮设置大圆角半径。 不需要赋值
circle	无	无	设置为正圆按钮, 且会让文字失效。 不需要赋值
autofocus	无	无	让按钮自动获得焦点。 不需要赋值
lazy	Number	0	为按钮设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发点击事件