wxc-button

    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>
    35.   <view class="container">
    36.     <view class="title">自定义按钮</view>
    37.     <view class="button-small-wrap">
    38.       <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>
    39.     </view>
    40.     <view class="button-small-wrap">
    41.       <wxc-button btnStyle="{{style}}">预约直播 <wxc-icon color="#fff" type="arrow-right"></wxc-icon></wxc-button>
    42.     </view>
    43.     <view class="button-small-wrap">
    44.       <wxc-button type="beauty" btnStyle="width: 312rpx;">立即换购</wxc-button>
    45.     </view>
    46.   </view>
    47.   <view class="container">
    48.     <view class="title">表单</view>
    49.     <view class="button-small-wrap">
    50.       <wxc-button bindsubmit="onSubmit" type="beauty" btnStyle="width: 312rpx;">按钮</wxc-button>
    51.     </view>
    52.   </view>
    53. </template>
    55. <script>
    56. export default {
    57.   config: {
    58.     usingComponents: {
    59.       'wxc-button': '@minui/wxc-button',
    60.       'wxc-icon': '@minui/wxc-icon'
    61.     }
    62.   },
    63.   data: {
    64.     types: [
    65.       'beauty', 'selection', 'disabled',
    66.       'danger', 'success', 'secondary',
    67.       'primary', 'info', 'dark', 'warning'
    68.     ],
    69.     style: 'width: 222rpx;background: #ff9300;border-radius: 66rpx;color: #fff;'
    70.   },
    71.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    72.   methods: {
    74.           console.log(e.detail.formId)
    75.   }
    76. }
    77. </script>
    79. <style>
    80.   .container {
    81.     width: 100%;
    82.     padding-top: 20rpx;
    83.     background: #fff;
    84.     text-align: center;
    85.   }
    86.   .container:after {
    87.     display: block;
    88.     content: " ";
    89.     clear:both;
    90.     visibility:hidden;
    91.     height:0;
    92.   }
    93.   .title {
    94.     line-height: 50rpx;
    95.     margin-left:35rpx;
    96.     margin-bottom:10rpx;
    97.     text-align:left;
    98.     font-weight: bold;
    99.     font-size: 30rpx;
    100.     color: #333;
    101.   }
    102.   .button-wrap {
    103.     margin:0 0 10rpx 35rpx;
    104.     float: left;
    105.   }
    106.   .button-large-wrap {
    107.     margin-bottom: 10rpx;
    108.   }
    109.   .button-small-wrap {
    110.     margin:0 0 10rpx 30rpx;
    111.     float: left;
    112.   }
    113. </style>

    Button

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

    v1.0.1（2018-6-5）

    v1.0.0（2018-02-26）

    • 初始版本