wxc-button

MinUI 小程序组件 - 按钮组件

Install

  1. $ min install @minui/wxc-button

Demos

按钮示例

按钮 button - 图1

  1. <template>
  2.   <view class="container">
  3.     <view class="title">普通按钮</view>
  4.     <view class="button-wrap" wx:for="{{types}}" wx:for-item="type" wx:key="key">
  5.       <wxc-button size="normal" type="{{type}}" value="{{type}}"></wxc-button>
  6.     </view>
  7.   </view>
  9.   <view class="container">
  10.     <view class="title">镂空按钮</view>
  11.     <view class="button-wrap" wx:for="{{types}}" wx:for-item="type" wx:key="key">
  12.       <wxc-button plain="{{true}}" size="normal" type="{{type}}" value="{{type}}"></wxc-button>
  13.     </view>
  14.   </view>
  16.   <view class="container">
  17.     <view class="title">小按钮</view>
  18.     <view class="button-small-wrap">
  19.       <wxc-button size="small" type="beauty" value="small"></wxc-button>
  20.     </view>
  21.     <view class="button-small-wrap">
  22.       <wxc-button plain="{{true}}" size="small" type="beauty" value="small"></wxc-button>
  23.     </view>
  24.   </view>
  26.   <view class="container">
  27.     <view class="title">大按钮带 loading 状态</view>
  28.     <view class="button-large-wrap">
  29.       <wxc-button size="large" type="beauty" loading="{{true}}" value="large button"></wxc-button>
  30.     </view>
  31.     <view class="button-large-wrap">
  32.       <wxc-button plain="{{true}}" size="large" type="beauty" loading="{{true}}" value="large button"></wxc-button>
  33.     </view>
  34.   </view>
  36.   <view class="container">
  37.     <view class="title">自定义按钮</view>
  38.     <view class="button-small-wrap">
  39.       <wxc-button type="beauty" btnStyle="min-width: 66rpx;padding: 0;border-radius: 66rpx"><wxc-icon color="#fff" size="36" type="cart"></wxc-icon></wxc-button>
  40.     </view>
  41.     <view class="button-small-wrap">
  42.       <wxc-button btnStyle="{{style}}">预约直播 <wxc-icon color="#fff" type="arrow-right"></wxc-icon></wxc-button>
  43.     </view>
  44.     <view class="button-small-wrap">
  45.       <wxc-button type="beauty" btnStyle="width: 312rpx;">立即换购</wxc-button>
  46.     </view>
  47.   </view>
  48.   <view class="container">
  49.     <view class="title">表单</view>
  50.     <view class="button-small-wrap">
  51.       <wxc-button bindsubmit="onSubmit" type="beauty" btnStyle="width: 312rpx;">按钮</wxc-button>
  52.     </view>
  53.   </view>
  54. </template>
  56. <script>
  57. export default {
  58.   config: {
  59.     usingComponents: {
  60.       'wxc-button': '@minui/wxc-button',
  61.       'wxc-icon': '@minui/wxc-icon'
  62.     }
  63.   },
  64.   data: {
  65.     types: [
  66.       'beauty', 'selection', 'disabled',
  67.       'danger', 'success', 'secondary',
  68.       'primary', 'info', 'dark', 'warning'
  69.     ],
  70.     style: 'width: 222rpx;background: #ff9300;border-radius: 66rpx;color: #fff;'
  71.   },
  72.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  73.   methods: {
  74.       onSubmit(e) {
  75.           console.log(e.detail.formId)
  76.       }
  77.   }
  78. }
  79. </script>
  81. <style>
  82.   .container {
  83.     width: 100%;
  84.     padding-top: 20rpx;
  85.     background: #fff;
  86.     text-align: center;
  87.   }
  88.   .container:after {
  89.     display: block;
  90.     content: " ";
  91.     clear:both;
  92.     visibility:hidden;
  93.     height:0;
  94.   }
  95.   .title {
  96.     line-height: 50rpx;
  97.     margin-left:35rpx;
  98.     margin-bottom:10rpx;
  99.     text-align:left;
  100.     font-weight: bold;
  101.     font-size: 30rpx;
  102.     color: #333;
  103.   }
  104.   .button-wrap {
  105.     margin:0 0 10rpx 35rpx;
  106.     float: left;
  107.   }
  108.   .button-large-wrap {
  109.     margin-bottom: 10rpx;
  110.   }
  111.   .button-small-wrap {
  112.     margin:0 0 10rpx 30rpx;
  113.     float: left;
  114.   }
  115. </style>

API

Button

名称描述
size[说明]：按钮的大小[类型]：String[默认值]：normal[可选值]：normal, small, large
type[说明]：按钮的样式类型[类型]：String[默认值]：""[可选值]：beauty, selection, success, primary, danger, warning, secondary, info, dark, disabled
plain[说明]：按钮是否镂空，背景色透明[类型]：Boolean[默认值]：false
value[说明]：按钮的文本值支持 slot, slot 的优先级低于 value[类型]：String[默认值]：""
loading[说明]：按钮文本前是否带 loading 图标[类型]：Boolean[默认值]：false
btn-style[说明]：按钮的自定义样式[类型]：String[默认值]：""
hover-class[说明]：指定按钮按下去的样式类，当 hover-class="none" 时，没有点击态效果[类型]：String[默认值]：btnhover[可选值]：btnhover, none
open-type[说明]：同微信小程序 button 组件。微信开放能力[类型]：String[默认值]：""[可选值]：contact, share, getUserInfo, getPhoneNumber, launchApp
app-parameter[说明]：同微信小程序 button 组件。打开 APP 时，向 APP 传递的参数[类型]：String[默认值]：""
hover-stop-propagation[说明]：同微信小程序 button 组件。指定是否阻止本节点的祖先节点出现点击态[类型]：Boolean[默认值]：false
hover-start-time[说明]：同微信小程序 button 组件。按住后多久出现点击态，单位毫秒[类型]：Number[默认值]：20
hover-stay-time[说明]：同微信小程序 button 组件。手指松开后点击态保留时间，单位毫秒[类型]：Number[默认值]：70
lang[说明]：同微信小程序 button 组件。指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文[类型]：String[默认值]：en
session-from[说明]：同微信小程序 button 组件。会话来源[类型]：String
send-message-title[说明]：同微信小程序 button 组件。会话内消息卡片标题[类型]：String[默认值]：当前标题
send-message-path[说明]：同微信小程序 button 组件。会话内消息卡片点击跳转小程序路径[类型]：String[默认值]：当前分享路径
send-message-img[说明]：同微信小程序 button 组件。会话内消息卡片图片[类型]：String[默认值]：截图
show-message-card[说明]：同微信小程序 button 组件。显示会话内消息卡片[类型]：Boolean[默认值]：false
bind:click[说明]：同微信小程序 button 组件。按钮点击事件，bind:tap已废弃，请升级组件。[类型]：Handler
bindgetuserinfo[说明]：同微信小程序 button 组件。用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同 wx.getUserInfo[类型]：Handler
bindcontact[说明]：同微信小程序 button 组件。客服消息回调[类型]：Handler
bindgetphonenumber[说明]：同微信小程序 button 组件。获取用户手机号回调[类型]：Handler
binderrror[说明]：同微信小程序 button 组件。当使用开放能力时，发生错误的回调调[类型]：Handler
bind:submit[说明]：button 组件 form-type 设置为 submit, 内置 form 表单，点击按钮时触发 submit 事件，可用于获取 formId 等，event.detail = {value, formId}

Note

  • 小程序组件系统中组件是隔离的，组件外层套 form 标签时两者是不通的，现在组件中内置 form 标签用于获取 formId。
  • 小程序组件系统中组件是隔离的，所以提交表单时无法用 form 表单获取输入框中的值，只能单独获取。

ChangeLog

v1.0.1（2018-6-5）

  • wxc-button 点击事件名由 bind:tap 更名为 bind:click。

v1.0.0（2018-02-26）

  • 初始版本