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.vue"
export default {
	components:{
		tuiFormButton
	}
}

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

uni-app版本平台差异说明

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

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

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

代码演示

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

基础使用

<tui-form-button>页面主操作</tui-form-button>
<tui-form-button text="页面主操作"></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>

其他说明

TIP

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

Slots

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

Props

属性名	类型	说明	默认值
background	String	按钮背景色	#5677fc
text V1.7.0+	String	按钮显示文本，兼容App-Nvue端时使用，替代插槽文本，仅uni-app端有效	-
color	String	按钮字体颜色	#fff
disabledBackground	String	按钮禁用背景色	-
disabledColor	String	按钮禁用字体颜色	-
borderWidth V1.7.0+	String	按钮边框宽度	Nvue：0.5px，非Nvue：1rpx
borderColor	String	按钮边框颜色	-
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调整与其他元素之间间距，App-Nvue不建议使用	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	-
scope	String	当 open-type 为 getAuthorize 时，可以设置 scope 为：phoneNumber、userInfo，仅支付宝小程序有效	-
appParameter V2.20+	String	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	-
index	[Number, String]	索引	0

Events

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

事件名	说明	回调参数
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}
opensetting V1.7.0	在打开授权设置页并关闭后回调，参考官方按钮opensetting (opens new window)	授权设置信息
chooseavatar V2.2.0+	获取用户头像回调	头像信息
launchapp V2.2.0+	从小程序打开 App 成功的回调	{detail = {}}

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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