按钮

支持丰富配置的按钮组件。

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	指定按下去的样式类
text	String	-	按钮文本
disabled	Boolean	false	禁用状态
theme	String	-	[详情] 按钮主题
iconName	String	-	前置图标名称
iconMode	String	-	[参考] 前置图标图片的裁剪、缩放模式
iconOpts	Object	-	[参考] 前置图标的配置
afterIconName	String	-	后置图标名称
afterIconMode	String	-	[参考] 后置图标图片的裁剪、缩放模式
afterIconOpts	Object	-	[参考] 后置图标的配置
loading	Boolean	false	加载状态
loadingText	String	处理中	加载提示文本
loadingIconName	String	__loading1	加载图标名称
loadingIconMode	String	-	[参考] 加载图标图片的裁剪、缩放模式
loadingIconOpts	Object	-	[参考] 加载图标的配置
ghost	Boolean	false	是否是幽灵按钮
plain	Boolean	false	是否是镂空按钮
shape	String	-	[详情] 按钮形状
block	Boolean	false	是否是块级按钮，表现为宽度 100%
link	Boolean	false	是否是链接按钮，表现类似一个普通文本或超链接
underline	Boolean	false	是否显示下划线
debounce	Boolean	true	[详情] 是否开启防抖
time	Number	800	[详情] 防抖间隔，即两次点击之间的间隔，毫秒
tips	String	-	[详情] 防抖提示文本
size	String	-	方块按钮、圆形按钮的尺寸（宽、高）
fontSize	String	-	按钮字体大小
color	String	-	按钮字体颜色
radius	String	-	按钮圆角大小
background	String	-	按钮背景
bgOpacity	String	-	按钮背景透明度
border	String	-	按钮边框样式
borderWidth	String	-	按钮边框宽度
borderStyle	String	-	按钮边框样式
borderColor	String	-	按钮边框颜色
width	String	-	按钮宽度
height	String	-	按钮高度
margin	String	-	按钮外边距
padding	String	-	按钮内边距
lineHeight	String	-	按钮文本内容行高
formType	String	-	[参考] 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
openType	String	-	[参考] 开放能力
hoverStartTime	Number	20	[参考] 按住后多久出现点击态，单位毫秒
hoverStayTime	Number	70	[参考] 手指松开后点击态保留时间，单位毫秒
appParameter	String	-	[参考] 打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效
hoverStopPropagation	Boolean	false	[参考] 指定是否阻止本节点的祖先节点出现点击态
lang	String	en	[参考] 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
sessionFrom	String	-	[参考] 会话来源
sendMessageTitle	String	当前标题	[参考] 会话内消息卡片标题
sendMessagePath	String	当前分享路径	[参考] 会话内消息卡片点击跳转小程序路径
sendMessageImg	String	截图	[参考] 会话内消息卡片图片
showMessageCard	Boolean	false	[参考] 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示 "可能要发送的小程序" 提示，用户点击后可以快速发送小程序消息
groupId	String	-	[参考] 打开群资料卡时，传递的群号
guildId	String	-	[参考] 打开频道页面时，传递的频道号
publicId	String	-	[参考] 打开公众号资料卡时，传递的号码
dataImId	String	-	[参考] 客服的抖音号
dataImType	String	-	[参考] IM 卡片类型
dataGoodsId	String	-	[参考] 商品的 id，仅支持泛知识课程库和生活服务商品库中的商品
dataOrderId	String	-	[参考] 订单的 id，仅支持交易 2.0 订单
dataBizLine	String	-	[参考] 商品类型，“1” 代表生活服务，“2” 代表泛知识

主题

通过 theme 属性来设置按钮主题，主题分为内置主题和自定义扩展主题。

内置主题

直接将 theme 属性设置为内置主题名称即可使用，如 theme="primary"。

主题名称	说明
primary	主要按钮，用于主要操作，如提交、确认等。
success	成功按钮，用于表示操作成功，如提交成功、确认成功等。
warning	警告按钮，用于表示警告，如删除、取消等。
danger	危险按钮，用于表示危险操作，如删除、取消等。
info	信息按钮，用于展示信息，如查看详情、了解更多等。

扩展主题

1. 首先在 css 中定义好主题变量名。
2. 直接将变量名赋值给 theme 属性即可使用，如 theme="--my-custom-button-theme-1"。

vue

<!-- 扩展主题 -->
<pure-button text="扩展主题" theme="--my-custom-button-theme-1" />

css

/* 定义扩展主题变量 */
page {
	--my-custom-button-theme-1: #ff9900;
}

形状

按钮默认为带 '5px' 圆角大小，通过 shape 属性来设置按钮形状。

值	说明
square	矩形按钮
round	圆角按钮
cube	方块按钮，表现为一个正方形
circle	圆形按钮，表现为一个正圆

防抖

为了方便使用，按钮内置了防抖功能，默认防抖时间为 800ms。

• 通过 debounce 属性来开启防抖功能，默认值为 true。
• 通过 time 属性来设置防抖间隔时间，单位为 ms，默认值为 800ms。
• 通过 tips 属性来设置触发防抖时的提示，为空则不提示，默认值为空。

<pure-button
	shape="block"
	theme="warning"
	text="点击我时，两次时间间隔不能小于 5 秒"
	font-size="12px"
	height="44px"
	debounce
	time="5000"
	tips="点击的太快啦"
></pure-button>

事件

名称	参数	说明
@onClick	-	[参考] 点击按钮时触发
@onGetPhoneNumber	event	[参考] 获取用户手机号回调，支付宝小程序还需设置 scope，参考 [参考]
@onGetUserInfo	event	[参考] 获取用户手机号的回调，，支付宝小程序还需设置 scope，参考 [参考]
@onError	event	[参考] 当使用开放能力时，发生错误的回调
@onOpenSetting	event	[参考] 在打开授权设置页并关闭后回调
@onLaunchApp	event	[参考] 从小程序打开 App 成功的回调
@onContact	event	[参考] 客服消息回调
@onChooseAvatar	event	[参考] 获取用户头像回调
@onAgreePrivacyAuthorization	event	[参考] 用户同意隐私协议事件回调
@onAddGroupApp	event	[参考] 添加群应用的回调
@onChooseAddress	event	[参考] 调起用户编辑并选择收货地址的回调
@onChooseInvoiceTitle	event	[参考] 用户选择发票抬头的回调
@onSubscribe	event	[参考] 订阅消息授权回调
@onLogin	event	[参考] 登录回调
@onIM	event	[参考] 监听跳转 IM 的成功回调

插槽

名称	参数	说明
#loading	-	加载状态
#loadingIcon	-	加载图标
#loadingText	-	加载提示文本
#icon	-	前置图标
#default	-	默认，按钮文本，按钮内容
#afterIcon	-	后置图标