# tui-form-button 按钮

介绍

按钮,支持自定义颜色,支持表单提交。

注意

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

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

# 引入

# uni-app引入

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

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

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

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

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

# 代码演示

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

基础使用
<tui-form-button>页面主操作</tui-form-button>
按钮形状

通过 radius 属性设置按钮的形状。

<tui-form-button radius="50px">圆角按钮</tui-form-button>
<tui-form-button radius="0">平角按钮</tui-form-button>
自定义颜色

通过 background 属性设置按钮的背景色。

<tui-form-button background="#9400D3">页面次要操作</tui-form-button>
<tui-form-button background="linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44))" borderColor="transparent">渐变背景色</tui-form-button>

# Slots

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

# Props

参数 类型 说明 默认值
background String 按钮背景色 #5677fc
color String 按钮字体颜色 #fff
disabledBackground String 按钮禁用背景色 -
disabledColor String 按钮禁用字体颜色 -
borderColor String 按钮边框颜色 -
width String 宽度 单位rpx或 % 100%
height String 高度 单位rpx 96rpx
size Number 字体大小 单位rpx 32
bold Boolean 按钮文字是否加粗 false
margin String margin调整与其他元素之间间距 0
radius String 按钮圆角值 6rpx
plain Boolean 是否镂空 false
link Boolean link样式,去掉边框,结合plain一起使用 false
disabled Boolean 是否禁用 false
loading Boolean 是否展示loading false
formType String 参考官方formType -
openType String 参考官方openType -
index [Number, String] 索引 0

# 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示例小程序码