# tui-button 按钮开源组件

介绍

可自定义宽高，设置字体大小，阴影，圆角，镂空等，支持表单提交。

注意

如果编译到小程序端报错，请检查小程序开发工具的调试基础库版本。

['wx://form-field-button'] 从基础库版本 2.10.3 开始提供支持。详见 (opens new window)。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
export default {
	components:{
		tuiButton
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	App-Nvue
✓	✓	✓	✓	✓	✓	✓	升级中

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-button": "/components/thorui/tui-button/tui-button"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

按钮类型

按钮支持 primary 、white、danger 、warning 、green 、blue 、gray 、black 、brown 、gray-primary 、gray-danger 、gray-warning 、gray-green 等类型，默认为 primary。

<tui-button>页面主操作</tui-button>
<tui-button type="warning">页面次要操作</tui-button>
<tui-button type="danger">页面次要操作</tui-button>
<tui-button type="gray-primary">页面次要操作</tui-button>

空心按钮

通过 plain 属性将按钮设置为空心按钮。

<tui-button plain>页面主操作</tui-button>
<tui-button type="warning" plain>页面次要操作</tui-button>
<tui-button type="danger" plain>页面次要操作</tui-button>

按钮形状

通过 shape 属性设置按钮的形状，支持 circle(圆角) 、 square(默认方形) 、rightAngle(平角)。

<tui-button>页面主操作</tui-button>
<tui-button type="warning" shape="circle">页面次要操作</tui-button>
<tui-button type="danger" shape="rightAngle">页面次要操作</tui-button>

禁用状态

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。

<tui-button disabled>页面主操作</tui-button>
<tui-button type="warning" disabled>页面次要操作</tui-button>
<tui-button type="danger" disabled>页面次要操作</tui-button>

加载状态

通过 loading 属性设置按钮为加载状态,可结合 disabled 使用。

<tui-button disabled loading>页面主操作</tui-button>
<tui-button type="warning" disabled loading>页面次要操作</tui-button>
<tui-button type="danger" disabled loading>页面次要操作</tui-button>

按钮尺寸

通过 width 、height 属性设置按钮尺寸，width 默认值为 100%，height 默认值为 96rpx。

<tui-button width="372rpx" height="84rpx">页面主操作</tui-button>
<tui-button type="warning" width="280rpx" height="90rpx">页面次要操作</tui-button>
<tui-button type="danger" width="200rpx" height="80rpx">页面次要操作</tui-button>

自定义颜色

此组件不支持自定义颜色，如若需要自定义颜色，请使用 tui-form-button (opens new window) 组件。

注：自v2.8.0起，主色支持全局配置。 详见全局配置文档

其他说明

TIP

若组件宽度为100%时，注意外层容器的宽度，避免flex布局下，宽度被挤压。若宽度被挤压可在组件外层套个view，将view宽度设置成100%。

# Slots

插槽名称	插槽说明
default	标签显示内容，按钮内显示内容可自定义

# Props

属性名	类型	说明	默认值
type	String	样式类型，可传入[ primary、white、danger 、warning、green 、blue 、gray 、black 、brown 、gray-primary 、gray-danger 、gray-warning 、gray-green]	primary
shadow	Boolean	是否加阴影	false
width	String	宽度单位rpx或 %	100%
height	String	高度单位rpx	96rpx
btnSize V2.8.0+	String	按钮大小，优先级高于属性width/height，可选值：medium、small、mini	-
size	[Number, String]	字体大小单位rpx	32
bold	Boolean	按钮文字是否加粗	false
margin	String	margin调整与其他元素之间间距	0
shape	String	形状 circle(圆角), square(默认方形)，rightAngle(平角)	square
plain	Boolean	是否镂空	false
link	Boolean	link样式，去掉边框，结合plain一起使用	false
disabled	Boolean	是否禁用	false
disabledGray	Boolean	禁用后背景是否为灰色（非空心button生效）	false
loading	Boolean	是否展示loading	false
formType	String	参考官方formType	-
openType	String	参考官方openType	-
appParameter V2.20+	String	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	-
index	[Number, String]	索引	0
preventClick	Boolean	是否阻止用户重复点击，设为true则200ms内只执行一次点击事件，默认false	false

# Events

注：uni-app端绑定事件使用@前缀，如@getuserinfo；微信小程序原生使用bind前缀，如bindgetuserinfo

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

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 特别说明

该组件为 开源组件，uni-app版所有用户均可免费使用。
微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

# 线上程序扫码预览


ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码

← tui-icon 图标 tui-tag 标签 →