Button 按钮

按钮组件用于响应用户点击行为，触发相应的业务逻辑，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Button",
  3.     "usingComponents": {
  4.         "wux-icon": "../../dist/icon/index",
  5.         "wux-button": "../../dist/button/index"
  6.     }
  7. }

示例

!> 目前，设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 from 在自定义组件外，将会使这个 button 的 form-type 失效。

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Button</view>
  4.         <view class="page__desc">按钮</view>
  5.     </view>
  6.     <view class="page__bd page__bd_spacing">
  7.         <view class="sub-title">Type</view>
  8.         <wux-button block type="light">light</wux-button>
  9.         <wux-button block type="stable">stable</wux-button>
  10.         <wux-button block type="positive">positive</wux-button>
  11.         <wux-button block type="calm">calm</wux-button>
  12.         <wux-button block type="assertive">assertive</wux-button>
  13.         <wux-button block type="balanced">balanced</wux-button>
  14.         <wux-button block type="energized">energized</wux-button>
  15.         <wux-button block type="royal">royal</wux-button>
  16.         <wux-button block type="dark">dark</wux-button>
  17.         <view class="sub-title">Outline</view>
  18.         <wux-button block outline type="light">light</wux-button>
  19.         <wux-button block outline type="stable">stable</wux-button>
  20.         <wux-button block outline type="positive">positive</wux-button>
  21.         <wux-button block outline type="calm">calm</wux-button>
  22.         <wux-button block outline type="assertive">assertive</wux-button>
  23.         <wux-button block outline type="balanced">balanced</wux-button>
  24.         <wux-button block outline type="energized">energized</wux-button>
  25.         <wux-button block outline type="royal">royal</wux-button>
  26.         <wux-button block outline type="dark">dark</wux-button>
  27.         <view class="sub-title">Size</view>
  28.         <wux-button block size="small" type="light">light</wux-button>
  29.         <wux-button block size="small" type="stable">stable</wux-button>
  30.         <wux-button block size="small" type="positive">positive</wux-button>
  31.         <wux-button block size="default" type="calm">calm</wux-button>
  32.         <wux-button block size="default" type="assertive">assertive</wux-button>
  33.         <wux-button block size="default" type="balanced">balanced</wux-button>
  34.         <wux-button block size="large" type="energized">energized</wux-button>
  35.         <wux-button block size="large" type="royal">royal</wux-button>
  36.         <wux-button block size="large" type="dark">dark</wux-button>
  37.         <view class="sub-title">Clear</view>
  38.         <wux-button block clear type="light">light</wux-button>
  39.         <wux-button block clear type="stable">stable</wux-button>
  40.         <wux-button block clear type="positive">positive</wux-button>
  41.         <wux-button block clear type="calm">calm</wux-button>
  42.         <wux-button block clear type="assertive">assertive</wux-button>
  43.         <wux-button block clear type="balanced">balanced</wux-button>
  44.         <wux-button block clear type="energized">energized</wux-button>
  45.         <wux-button block clear type="royal">royal</wux-button>
  46.         <wux-button block clear type="dark">dark</wux-button>
  47.         <view class="sub-title">Loading</view>
  48.         <wux-button block loading type="light">light</wux-button>
  49.         <wux-button block loading type="stable">stable</wux-button>
  50.         <wux-button block loading type="positive">positive</wux-button>
  51.         <wux-button block loading type="calm">calm</wux-button>
  52.         <wux-button block loading type="assertive">assertive</wux-button>
  53.         <wux-button block loading type="balanced">balanced</wux-button>
  54.         <wux-button block loading type="energized">energized</wux-button>
  55.         <wux-button block loading type="royal">royal</wux-button>
  56.         <wux-button block loading type="dark">dark</wux-button>
  57.         <view class="sub-title">Disabled</view>
  58.         <wux-button block disabled type="light">light</wux-button>
  59.         <wux-button block disabled type="stable">stable</wux-button>
  60.         <wux-button block disabled type="positive">positive</wux-button>
  61.         <wux-button block disabled type="calm">calm</wux-button>
  62.         <wux-button block disabled type="assertive">assertive</wux-button>
  63.         <wux-button block disabled type="balanced">balanced</wux-button>
  64.         <wux-button block disabled type="energized">energized</wux-button>
  65.         <wux-button block disabled type="royal">royal</wux-button>
  66.         <wux-button block disabled type="dark">dark</wux-button>
  67.         <view class="sub-title">Icon</view>
  68.         <wux-button block type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
  69.         <wux-button block outline type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
  70.         <wux-button block size="small" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
  71.         <wux-button block size="default" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
  72.         <wux-button block size="large" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
  73.         <wux-button block clear type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
  74.         <wux-button block disabled type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
  75.     </view>
  76. </view>

视频演示

Button

API

Button props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-button
type string 按钮类型，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark stable
clear boolean 是否清除样式 false
block boolean 是否块级元素 false
full boolean 是否通栏 false
outline boolean 是否镂空 false
bordered boolean 是否带边框 true
size string 按钮的大小，可选值为 small、default、large default
disabled boolean 是否禁用 false
loading boolean 名称前是否带 loading 图标 false
formType string 用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件 -
openType string 微信开放能力，可选值为 contact、share、getUserInfo、getPhoneNumber -
hoverClass string 指定按钮按下去的样式类。当 hover-class=”none” 时，没有点击态效果 default
hoverStopPropagation boolean 指定是否阻止本节点的祖先节点出现点击态 false
hoverStartTime number 按住后多久出现点击态，单位毫秒 20
hoverStayTime number 手指松开后点击态保留时间，单位毫秒 70
lang string 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 en
sessionFrom string 会话来源 -
sendMessageTitle string 会话内消息卡片标题 当前标题
sendMessagePath string 会话内消息卡片点击跳转小程序路径 当前分享路径
sendMessageImg string 会话内消息卡片图片 截图
showMessageCard boolean 显示会话内消息卡片 false
appParameter string 打开 APP 时，向 APP 传递的参数 -
bind:click function 点击事件 -
bind:getuserinfo function 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致 -
bind:contact function 客服消息回调 -
bind:getphonenumber function 获取用户手机号回调 -
bind:error function 当使用开放能力时，发生错误的回调 -
bind:opensetting function 在打开授权设置页后回调 -

更多参数说明请参考微信官方的表单组件 Button。

Button slot

名称 描述
- 自定义内容

Button externalClasses

名称 描述
wux-class 根节点样式类
wux-hover-class 按钮按下去的样式类