【button】 按钮组件说明

原型:

<button
    size="[default | mini]"
    type="[primary | default | warn]"
    plain="[Boolean]"
    disabled="[Boolean]"
    loading="[Boolean]"
    form-type="[submit | reset]"
    open-type="[contact | share | getUserInfo | getPhoneNumber | launchApp | openSetting | feedback]"
    hover-class="[String]"
    hover-stop-propagation="[Boolean]"
    hover-start-time="[Number]"
    hover-stay-time="[Number]"
    lang="[zh_CN | zh_TW | en]"
    bindgetuserinfo="[Handler]"
    session-from="[String]"
    send-message-title="[String]"
    send-message-path="[String]"
    send-message-img="[String]"
    show-message-card="[Boolean]"
    bindcontact="[Handler]"
    bindgetphonenumber="[Handler]"
    app-parameter="[String]"
    binderror="[Handler]"
    bindopensetting="[Handler]"
    
>
</button>

 

属性:

名称 是否必须 类型 默认值 说明
size [default | mini] default 按钮大小
type [primary | default | warn] default 按钮的样式类型
plain [Boolean] false 按钮是否镂空,背景色透明
disabled [Boolean] false 是否禁用
loading [Boolean] false 名称前是否带 loading 图标
form-type [submit | reset] false 用于 <form/> 组件,点击分别会触发 <form/> 组件的 submit/reset 事件
open-type [contact | share | getUserInfo | getPhoneNumber | launchApp | openSetting | feedback]  

微信开放能力(各参数值说明见后表)

hover-class [String]

button-hover类

样式:{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagation [Boolean] false 指定是否阻止本节点的祖先节点出现点击态
hover-start-time [Number] 20 按住后多久出现点击态,单位毫秒
hover-stay-time [Number] 70 手指松开后点击态保留时间,单位毫秒
lang [en | zh_CN | zh_TW] en 返回用户信息的语言,生效条件:open-type="getUserInfo"
bindgetuserinfo [Handler]   用户点击该按钮时,会返回获取到的用户信息,生效条件:open-type="getUserInfo"
session-from [String]   会话来源,生效条件:open-type="contact"
send-message-title [String] 当前标题 会话内消息卡片标题,生效条件:open-type="contact"
send-message-path [String] 当前分享路径 会话内消息卡片点击跳转小程序路径,生效条件:open-type="contact" 
send-message-img [String]  截图 会话内消息卡片图片,生效条件:open-type="contact"
show-message-card [Boolean]  false 显示会话内消息卡片,生效条件:open-type="contact"
bindcontact [Handler]   客服消息回调,生效条件:open-type="contact"
bindgetphonenumber [Handler]    获取用户手机号回调,生效条件:open-type="getPhoneNumber"
app-parameter 否  [String]    打开 APP 时,向 APP 传递的参数,生效条件:open-type="launchApp" 
binderror  否  [Handler]    当使用开放能力时,发生错误的回调,生效条件:open-type="launchApp" 
bindopensetting 否  [Handler]    在打开授权设置页后回调,生效条件:open-type="openSetting"

 

open-type 有效值:

说明
contact 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息
share 触发用户转发
getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息
getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息
launchApp 打开APP,可以通过app-parameter属性设定向APP传的参数
openSetting 打开授权设置页
feedback 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

 

未完,待续...

posted @ 2018-11-07 16:49  1024记忆  阅读(741)  评论(0编辑  收藏  举报