wxc-stepper

Weex 步进器组件

规则

• 用作增加或者减少当前数值, 常用于商品数量的小幅度修改

Demo

使用方法

  1. <template>
    2.   <div class="wrapper">
    3.     <div class="demo">
    4.       <text class="text">无配置:</text>
    5.       <wxc-stepper></wxc-stepper>
    6.     </div>
    7.     <div class="demo">
    8.       <text class="text">{min:2,max:10,step:2,defaultValue:4}</text>
    9.       <wxc-stepper default-value="4"
    10.                    step="2"
    11.                    max="10"
    12.                    min="2"
    13.                    @wxcStepperValueChanged="stepperValueChange"></wxc-stepper>
    14.     </div>
    15.     <div class="demo">
    16.       <text class="text">禁用</text>
    17.       <wxc-stepper default-value="4"
    18.                    step="2"
    19.                    max="10"
    20.                    min="2"
    21.                    :disabled="isDisabled"></wxc-stepper>
    22.     </div>
    23.   24.     <div class="demo">
    25.       <text class="text">input只读:</text>
    26.       <wxc-stepper :read-only="isOnlyRead"></wxc-stepper>
    27.     </div>
    28.   </div>
    29. </template>
    30.   31. <script>
    32.   import { WxcStepper } from 'weex-ui';
    33.   export default {
    34.     components: { WxcStepper },
    35.     data: () => ({
    36.       value: 4,
    37.       isDisabled: true,
    38.       isOnlyRead: true
    39.     }),
    40.     methods: {
    41.       stepperValueChange (e) {
    42.         console.log(e.value);
    43.       }
    44.     }
    45.   };
    46. </script>Click to copy

更详细代码可以参考 demo

可配置参数

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-stepper/