Button 按钮

介绍

支持多种场景和样式的按钮，支持微信原生button组件的相关功能。

使用指南

一般用法

click点击事件，当disable生效时不会触发。

<tms-button bind:click="handleClick">默认按钮</tms-button>

Component({
    methods: {
        handleClick() {}
    }
})

带图片按钮

<tms-button image="IMAGE_SRC">带图片按钮</tms-button>

不同尺寸

<tms-button size="small">小号按钮</tms-button>
<tms-button>默认大小</tms-button>
<tms-button size="large">大号按钮</tms-button>

block满宽

<tms-button block>宽度铺满父元素</tms-button>

不同场景

<tms-button type="primary">默认强化按钮</tms-button>
<tms-button type="weak">弱化按钮</tms-button>

loading状态

<tms-button loading>loading状态按钮</tms-button>

禁用状态

<tms-button size="large" disable>禁用按钮 大尺寸</tms-button>

API

属性	说明	类型	默认值	版本
block	块级元素，宽度铺满父元素	boolean	false
disable	按钮失效状态	boolean	false
icon	文字旁边添加自定义icon，传图片链接	string
loading	显示按钮载入状态	boolean	false
size	设置按钮大小，见下文	string	normal
type	设置按钮场景模式，见下文	string	primary

支持原生 button 的其他所有属性,具体可参考 微信官方文档 (opens new window)

size属性可选值列表

属性	说明
large	大按钮，宽度固定
normal	普通按钮,宽度适配内容
small	小按钮，宽度固定

type属性可选值列表

属性	说明
primary	强化按钮，蓝色，用于期望用户点击的引导场景
weak	弱化按钮，灰色，用于不建议用户点击的弱化场景

EVENTS

属性	说明	类型
bind:tap	点击按钮时的回调	(event) => {}
bind:getphonenumber	获取用户手机号回调	(event) => {}
bind:click	点击按钮，且按钮状态不为加载或禁用时触发	-
bind:getuserinfo	用户点击该按钮时，会返回获取到的用户信息， 从返回参数的 detail 中获取到的值同 wx.getUserInfo	-
bind:contact	客服消息回调	-
bind:error	当使用开放能力时，发生错误的回调	-
bind:opensetting	在打开授权设置页后回调	-

支持原生 button 的其他所有事件。

按钮禁用时，click 事件不会触发，tap 事件依然会触发。

CSS变量

// 小尺寸按钮高度
--button-small-height: 50rpx;
// 小尺寸按钮宽度
--button-small-width: 120rpx;
// 小尺寸按钮字体大小
--button-small-font-size: 24rpx;
// 按钮高度
--button-normal-height: 72rpx;
// 按钮宽度
--button-normal-min-width: 88rpx;
// 按钮字体大小
--button-normal-font-size: 28rpx;
// 大尺寸按钮高度
--button-large-height: 96rpx;
// 大尺寸按钮宽度
--button-large-width: 606rpx;
// 大尺寸按钮字体大小
--button-large-font-size: 36rpx;
// 强化按钮文字颜色
--button-primary-color: white;
// 强化按钮背景颜色
--button-primary-background-color: #3F82FF;
// 强化按钮按压时背景色
--button-primary-hover-background-color: #3874E5;
// 弱化按钮字体颜色
--button-weak-color: --text-color;
// 弱化按钮背景颜色
--button-weak-background-color: white;
// 弱化按钮边框颜色
--button-weak-border-color: #DDDDDD;
// 弱化按钮按压时背景色
--button-weak-hover-background-color: #E5E5E5;
// 禁用状态文本颜色
--button-disabled-color: #C6C6C6;
// 禁用状态背景色
--button-disabled-background-color: #F2F2F2;

FAQ