Button 按钮，支持自定义大小、颜色等。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 text 属性设置按钮显示文本或者直接使用slot。（注意：nvue端，直接使用slot时字体相关设置属性失效，须嵌套text标签设置字体样式。）

<wui-button text="默认按钮"></wui-button>
<wui-button>默认按钮</wui-button>

按钮类型

通过 type 属性设置按钮的类型，不传值则默认为 primary 。

注意

非nvue端，可通过css变量全局修改按钮type类型对应的颜色，css变量参考 自定义主题。

<wui-button type="success">success</wui-button>
<wui-button type="warning">warning</wui-button>

禁用状态

通过 disabled 属性设置按钮是否禁用，disabledBackground 属性设置禁用状态下背景色，disabledColor 属性设置禁用状态下字体颜色。

<wui-button disabled>禁用按钮</wui-button>
<wui-button disabled loading>禁用按钮</wui-button>
<wui-button disabled disabledBackground="#F8F8F8" disabledColor="#CCCCCC">禁用按钮
</wui-button>

按钮形状

通过 radius 属性设置按钮圆角大小，从而控制按钮形状。

<wui-button radius="0">方形按钮</wui-button>
<wui-button radius="96rpx">圆形按钮</wui-button>

自定义颜色

通过 background 属性设置按钮背景色，color 属性设置按钮文字颜色，borderColor 属性设置按钮边框颜色。

<wui-button background="#fff" color="#465CFF" borderColor="#465CFF">朴素按钮</wui-button>

Slots

插槽名称	说明
default	标签内显示内容

Props

属性名	类型	说明	默认值	平台差异说明
type	String	按钮类型，可取值：primary、success、 warning、danger、link、purple、gray	primary	-
background	String	按钮背景色，当传入值时type失效	-	-
text	String	按钮显示文本	-	-
color	String	按钮字体颜色	#fff	-
disabledBackground	String	按钮禁用状态下背景色	-	-
disabledColor	String	按钮禁用状态下字体颜色	-	-
borderWidth	String	按钮边框宽度，非Nvue端默认缩放0.5倍	Nvue : 0.5px 非Nvue : 1px	Nvue端细边框可直接使用0.5px
borderColor	String	按钮边框颜色	-	-
width	String	按钮宽度	100%	-
height	String	按钮高度	96rpx	-
size	Number,String	字体大小，单位rpx	32	-
bold	Boolean	字体是否加粗	false	-
margin	Array	margin值：['20rpx','30rpx','20rpx','30rpx'] [上，右，下，左]	['0', '0']	-
radius	String	圆角大小	16rpx	-
plain	Boolean	是否镂空	false	-
disabled	Boolean	是否禁用	false	-
loading	Boolean	是否显示加载图标	false	-
formType	String	参考官方按钮formType属性	-	-
openType	String	参考官方按钮openType属性	-	-
scope	String	当 open-type 为 getAuthorize 时，可以设置 scope 为：phoneNumber、userInfo	-	支付宝小程序
appParameter	String	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	-	微信小程序、QQ小程序
index	Number, String	自定义参数	0	-

Events

事件名	说明	回调参数
@click	按钮点击事件，设置formType时无需使用	{ index:自定义参数 }
@getuserinfo	参考官方按钮 getuserinfo (opens new window)	返回获取到的用户信息
@contact	打开客服会话，参考官方按钮open-type值 contact (opens new window)	如果用户在会话中点击消息卡片后返回应用，可以从 contact 回调中获得具体信息
@getphonenumber	获取用户手机号回调，参考官方按钮getphonenumber (opens new window)	手机号信息
@error	当使用开放能力时，发生错误的回调，参考官方按钮error (opens new window)	错误回调信息
@opensetting	在打开授权设置页并关闭后回调，参考官方按钮opensetting (opens new window)	授权设置信息
@chooseavatar	获取用户头像回调	头像信息，仅微信小程序支持
@launchapp	从小程序打开 App 成功的回调	{detail = {} }