更新记录

v1.0.0（2023-01-05） 下载此版本

1、基础功能更新 2、流畅度优化，并增加按钮控制，禁用，初始默认值，小数点位数控制，缩放比例等。

平台兼容性

平台兼容性

在 H5、微信小程序测试通过，理论支持全平台 在线体验地址

属性：

事件：

实例：

<template>
    <view>

        <!-- 刻度值 -->
        <view class="value"> {{value}} </view>
        <!-- 按钮控制 -->
        <view class="button">
            <button class="mini-btn" type="warn" size="mini" @tap="setRuler('reduce')">-</button>
            <button class="mini-btn" type="warn" size="mini" @tap="setRuler('plus')">+</button>
        </view>

        <!-- 
        :min 最小值（默认0）
        :max 最大值（默认500）
        :disable 是否禁用（默认false）
        :multiple 缩放倍数（默认1）
        :point 保留小数点位数（默认0）
        :defaultValue 默认数值（默认0） 
        @change 刻度值事件监听
        -->
        <select-ruler 
            ref="ruler"
            :min="0" 
            :max="500" 
            :disable="false" 
            :multiple="10" 
            :point="1" 
            :defaultValue="100" 
            @change="handleChange"
        ></select-ruler>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                value: 0,
            }
        },
        onLoad() {
        },
        methods: {
            handleChange(e) {
                this.value = e;
            },
            setRuler(type) {
                // 手动控制增加，参数为每次增加的步长。
                if(type == 'plus') {
                    this.$refs.ruler.plusValue(1);
                }
                // 手动控制减少，参数为每次减少的步长，2代表一次减少两个刻度。
                if(type == 'reduce') {
                    this.$refs.ruler.reduceValue(2);
                }
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: white;
    }
    .value {
        width: 100%;
        padding: 100rpx 0 20rpx 0;
        text-align: center;
        font-size: 50rpx;
    }
    .button {
        width: 100%;
        text-align: center;
        padding-bottom: 50rpx;

        button {
            margin: 0 10rpx;
        }
    }
</style>