vue-scale

这是一个基于 better-scroll 滑动刻度尺，他支持水平，垂直滑动。

npm i vue-scale -S

列一

import VueScale from "vue-scale"
<VueScale v-model="value" />
data{
    return {
        value: 60
    }
}

列二

import VueScale from "vue-scale"
<VueScale v-model="value" :format="format" />
data{
    return {
        value: 60
    }
}
methods: {
    format(e) {
        return `${e}cm`
    }
}

演示

暂无 demo 显示》》

API

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------------ | ----------------------------------------- | ----------- | ---------- | ---- | | v-model | 初始化滑动位置（实时监听滑动 val） | Number | 0 | - | | type | 刻度尺类型 horizontal/verticality | String | horizontal | - | | max | 刻度尺最大刻度 | Number | 100 | - | | min | 刻度尺最小刻度 | Number | 0 | - | | ratio | 刻度尺刻度比例 | Number | 1 | - | | interval | 刻度尺刻度与刻度间隔 | Number | 8 | - | | group | 刻度尺刻度组 | Number | 10 | - | | flipVertical | 刻度尺刻水平/垂直翻转（与刻度尺类型关联） | Boolean | false | - | | mask | 刻度尺刻遮罩 （与刻度尺类型关联） | Boolean | true | - | | format | 刻度尺数字格式化 | Function(e) | - | - |

EVENT

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | -------------- | ----------------- | ------ | ---- | | scroll | 当前滑动中回调 | Function(value,e) | - | - | | scrollEnd | 当前滑动停止 | Function(value,e) | - | - |

说明：
1、刻度尺组件 type="verticality"，请设置高度，默认 100%。
2、不提供任何 css props，然和样式你都可以修改，包括（背景图片）。
3、刻度尺的刻度是背景图片，你可以设置的自己背景图片结合 group 来修改成你想要的。