button

更新时间：2024-09-18 14:46:35

基础库1.1.0开始支持,低版本需做兼容处理

开发者工具1.22.0开始支持

按钮

属性

属性	类型	默认值	必填	说明
size	'small' | 'default' | 'tiny' | 'mini' | 'medium' | 'large' | 'huge'	'default'	否	按钮的大小
type	'warn' | 'default' | 'primary'	'default'	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	'submit' | 'reset'		否	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
open-type	'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'favorite' | 'openProfile' | 'openUserProfile' | 'videoGenerate' | 'openChatGroupProfile' | 'videoPublish' | 'getUserExtendInfo' | 'addShortcut'		否	开放能力
hover-class	string	'button-hover'	否	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒
lang	'en' | 'zh_CN' | 'zh_TW'	'en'	否	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
user	string	''	否	要跳转的号主页，可以传快手号或者快手 id，open-type="openProfile" 时有效
fit	boolean	false	否	按钮是否自动适应父元素宽度
chat-group-number	string		否	群聊号，open-type 为openChatGroupProfile时有效
share-user-id	string		否	分享用户的openid，open-type为getUserExtendInfo时有效
bindaddshortcut	(e: { detail: Record<string, unknown> } & Event) => void		否	添加到桌面回调，open-type="addShortcut" 时有效

size

按钮的大小

值	说明
'small'	小尺寸
'default'	默认大小
'tiny'	特小尺寸
'mini'	超小尺寸
'medium'	中尺寸
'large'	大尺寸
'huge'	超大尺寸

type

按钮的样式类型

值	说明
'warn'	#FB5858
'default'	#FFFFFF
'primary'	#FE3666

formType

用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件

值	说明
'submit'	提交表单
'reset'	重置表单

openType

开放能力

值	说明	最低版本
'share'	触发用户转发，使用前建议先阅读使用指引	-
'getPhoneNumber'	获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息	-
'getUserInfo'	获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息	-
'launchApp'	打开APP，可以通过app-parameter属性设定向APP传的参数	-
'openSetting'	打开授权设置页	-
'favorite'	触发用户收藏	-
'openProfile'	触发打开用户主页，配合 user (userId/kwaiId) 使用	-
'openUserProfile'	触发打开用户主页，配合 user (openId) 使用	-
'videoGenerate'	生成快手分享视频	1.46.0
'openChatGroupProfile'	点击打开对应群聊	-
'videoPublish'	发布快手视频	-
'getUserExtendInfo'	获取用户额外身份信息，配合 shareUserId (openId) 使用	-
'addShortcut'	添加到桌面，可以从 bindaddshortcut 监听添加快捷方式的回调	-

lang

指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。

值	说明
'en'	英文
'zh_CN'	简体中文
'zh_TW'	繁体中文

扫码体验

示例代码

open-type 示例

<button open-type="share">转发</button>
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">获取用户手机号</button>
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户信息</button>
<button open-type="launchApp" bindlaunchapp="onLaunchApp">打开APP</button>
<button open-type="openSetting" bindopensetting="onOpenSetting">打开授权设置页</button>
<button open-type="favorite">收藏</button>
<button open-type="openProfile" user="1833712571">打开用户主页</button>
<button open-type="openChatGroupProfile" chat-group-number="K121323432749" type="default">测试群聊</button>
<button open-type="getUserExtendInfo" shareUserId="123456" bindgetuserextendInfo="getuserextendinfo">获取用户额外身份信息</button>
<button open-type="addShortcut" bindaddshortcut="onAddShortcut">添加到桌面</button>

Bug & Tip

1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2. tip: bindgetphonenumber 建议使用 ks.canIUse 进行检测
3. tip: 在 bindgetphonenumber 等返回加密信息的回调中调用 ks.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
4. tip: button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。
5. tip: 设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 from 在自定义组件外，将会使这个 button 的 form-type 失效。