# tui-button 按钮

介绍

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

注意

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

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

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

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

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

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

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

# 代码演示

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

按钮类型

按钮支持 primarywhitedangerwarninggreenbluegrayblackbrowngray-primarygray-dangergray-warninggray-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>
按钮尺寸

通过 widthheight 属性设置按钮尺寸,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 组件。

tui-form-button组件传送门 (opens new window)

# 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
size Number 字体大小 单位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 -
index [Number, String] 索引 0
preventClick Boolean 是否阻止用户重复点击,设为true则200ms内只执行一次点击事件,默认false false

# Events

事件名 说明 回调参数
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}

# 预览

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

# 线上程序扫码预览

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