Stepper计步器

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.    "vtu-stepper": "/miniprogram_npm/vtuweapp/stepper/vtu-stepper"
    3. }
    4.

    代码演示

    基础用法

    1. <vtu-stepper value="{{value1}}" bind:change="bindChange"></vtu-stepper>
    3. Page({
    4.   data: {
    5.     value1: 3
    6.   },
    8.   bindChange (e) {
    9.     this.setData({
    10.       value1: e.detail
    11.     })
    12.   }
    13. });
    14.  
    15.

    尺寸大小

    1. <view class="stepperSpan"><vtu-stepper value="{{value1}}" bind:change="bindChange"></vtu-stepper></view>
    2. <view class="stepperSpan"><vtu-stepper value="{{value1}}" bind:change="bindChange" size="small"></vtu-stepper></view>
    3. <view class="stepperSpan"><vtu-stepper value="{{value1}}" bind:change="bindChange" size="mini"></vtu-stepper></view>
    4.

    限制范围

    1. <vtu-stepper value="{{value1}}" min="-1" max="5" bind:change="bindChange"></vtu-stepper>
    2.

    全部禁用状态

    1. <vtu-stepper value="{{value1}}" disabled bind:change="bindChange"></vtu-stepper>
    2.

    自定义步数(步数2)

    1. <vtu-stepper value="{{value1}}" step="2"></vtu-stepper>
    2.

    异步处理

    1. <vtu-stepper value="{{value1}}" async="true" bind:change="bindAsyncChange"></vtu-stepper>
    3. Page({
    4.   data: {
    5.     value1: 3
    6.   },
    8.   bindAsyncChange (e) {
    9.     let self = this
    10.     wx.showLoading({
    11.       title: '处理中...'
    12.     })
    13.     setTimeout(function() {
    14.       self.setData({
    15.         value1: e.detail
    16.       })
    17.       wx.hideLoading();
    18.     }, 2000)
    19.   }
    20. });
    21.  
    22.

    自定义宽度

    <vtu-stepper value="{{value1}}" input-width="80px"></vtu-stepper>

    自定义按钮样式

    <vtu-stepper value="{{value1}}" minus-btn-type="danger" plus-btn-type="primary" size="small"></vtu-stepper>

    组件参数

    Stepper 计步器 - 图1