更新记录

v1.0（2019-07-09） 下载此版本

v1.0 首次发布

平台兼容性

sunui-stepper for sunUI

不多说了吧,直接上示例!!!,sunUI本月底发布beta2.0.0

<!-- 
*
* 建议min和val一样！
* 
* label:是计数器标识
* max：最大值
* min：最小值
* val：默认值 
* step：步进值(支持整数和小数,因步骤计算失误会造成精度损失！)
* 
* unactive：当前不可点击标识颜色
* active：当前可点击标识颜色
* 
* @change：回调事件
* 
*  -->
<template>
    <view class="sunui">
        <view class="sunui-title">计数器(普通步进)</view>
        <view>
            <sunui-stepper :label='1' :max="10" :val="-5" :min="-5" @change="stepper2"></sunui-stepper>
        </view>
        <view class="sunui-title">计数器(整数步进)</view>
        <view>
            <sunui-stepper :label='2' :max="5" :val="2" :step="3" :min="2" @change="stepper3"></sunui-stepper>
        </view>
        <view class="sunui-title">计数器(支持点位步进,可能会损失精度)</view>
        <view>
            <sunui-stepper unactive="#ddd" active="#19A15F" :label='0' :val="4" :max="10" :min="4" :step="0.2" @change="stepper1"></sunui-stepper>
        </view>
        <view class="sunui-title">计数器(循环)</view>
        <view>
            <view v-for="(item,index) in stepperList" :key='index'>
                <sunui-stepper :label='item.id' :max="10" :val="-5" :min="-5" @change="stepper"></sunui-stepper>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                stepperList: [{
                        id: 10
                    },
                    {
                        id: 20
                    }
                ],
                arrs: []
            };
        },
        onLoad() {

        },
        methods: {
            stepper(e) {
                for (let i = 0, len = this.stepperList.length; i < len; i++) {
                    if (this.stepperList[i].id != e.label) {
                        this.arrs.push({
                            id: e.label,
                            val: e.val
                        });
                    }
                }
                console.log('循环计数器：', [...new Map(this.arrs.map(({
                    id,
                    val
                }) => ([id, val]))).entries()].map(([id, val]) => ({
                    id,
                    val
                })));
            },
            stepper1(e) {
                console.log(e);
            },
            stepper2(e) {
                console.log(e);
            },
            stepper3(e) {
                console.log(e);
            }
        }
    }
</script>
<style>
    .sunui>.sunui-title {
        margin-bottom: 2%;
    }
</style>