Vue定制尺子，支持各种自定义，使用简单方便

看到网上很多关于Vue的尺子组件，有一些上传到npm官网的，但是使用并不方便，支持的定制化也不够用，抽空写了一个，总体来说主要是样式写好，效果是基于better-scroll实现的，支持bounce效果，自动识别最近的刻度，只需要传入自己的最大值和最小值，就会帮你算出一个包含最大值的最大刻度，整体效果不错，由于是demo，没有基于任何UI效果，要达到自己设计师要求的UI效果，可以将这份代码拷贝过去自己改造定义一个尺子的Vue组件来使用，效果图：

有点大了

页面DOM结构如下，样式采用的stylus预处理语法，个人觉得stylus就是为css而生的，相比less，sass好用很多，请现在webpack.config.js里面配上处理stylus的规则，

样式如下：

js代码如下：

基本上项目安装好better-scroll后就可以运行起来了,

今天做了一个小小的优化，支持传入最大值和最小值，从而只显示这个值域段的刻度

DOM

样式添加：

JS逻辑：

export default {

    props: {

        max_val: {

            type: Number,

            default() {

                return 888

            }

        },

        min_val: {

            type: Number,

            default() {

                return 666

            }

        }

    },

    data() {

        return {

            split_val: 10,

            value: 0,

            initail_val: 0

        }

    },

    mounted() {

        let ul = this.$refs.ul

        let lis = ul.getElementsByTagName('li')

        let first_li = lis[0]

        let last_li = lis[lis.length - 1]

        first_li.style.marginLeft = document.body.clientWidth/2 + 'px'

        last_li.style.marginRight= document.body.clientWidth/2 + 'px'

        this.value = this.ruler_min_num * 10

        this.initail_val = this.ruler_min_num * 10

        this.$nextTick(()=>{

            let bs = new BScroll('.wrapper', {

                startX: 0,

                scrollX: true,

                probeType: 2,

                useTransition: false,

                bounce: true,

                momentum: true

            })

            bs.on('scrollEnd', ({x, y}) => {

                if (x > 0) {

                    x = 0

                }

                this.value = -Math.round(x / 10) + this.ruler_min_num * 10

                bs.scrollTo(Math.round(x / 10) * 10, 0)

            })

        })

    },

    computed: {

        ul_width() {

            return this.actual_num * 10 * 10 + document.body.clientWidth

        },

        ruler_max_num() {

            let split_num = Math.floor(this.max_val / this.split_val)

            let left_v = this.max_val % this.split_val

            if (left_v > 0) {

                split_num = split_num + 1

            }

            return split_num

        },

        ruler_min_num() {

            let split_num = Math.floor(this.min_val / this.split_val)

            return split_num

        },

        actual_num() {

            return this.ruler_max_num - this.ruler_min_num

        }

    }

}

效果图：传入最大值88，传入最小值66，显示为60-90之前的尺段，提高尺子的滑动效率：