基于better-scroll的vue datePicker组件

        好久没写博客了，甚是想念，也不知道写个啥比较好，一直很无脑的忙公司的项目，不知不觉都快一年没写新博客了，真是惭愧，上次写公司项目的时候使用的mint-ui这个UI组件，使用的过程中出现了一个很奇怪的问题，在微信端打开的时候是正常的，但是在浏览器里打开的时候picker里就不显示数据了，没法选择，不过只是部分的手机，比如iphone7，后来排错的时候发现mint-ui的官网，发现官网发布的例子在这个手机上呈现了一样的问题，于是才孕育了这个组件。经过测试，在各个浏览器上都是能正常显示和筛选的，没有参考别人的算法，自己写了一套算法，大佬们看后可以不吝赐教提出更好的算法或者改进的地方。

        话不多说，开始讲代码吧，主题代码大概是这样的。

<template>
    <div class="picker wheel-scroll">
        <div class="bg"></div>
        <div class="piciker-cont">
            <div class="btns">
                <div class="cancel" @click="cancelClick">{{cancelBtnText}}</div>
                <div class="sure" @click="sureClick">{{sureBtnText}}</div>
            </div>
            <div class="picker-contain">
                <div v-for="(k,i) in dateData" :key="i" v-show="i === 0 ? hasYear : (i === 1 ? hasMonth : (i === 2) ? hasDate : false)" class="wheel-cont wheel-scroll" ref="picker">
                    <ul class="wheel-item items">
                        <li v-for="(key,index) in k" :key="index" class="item">{{key}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
    data () {
        return {
            canClick: true,
            dateData: [],
            i: 0,
            pickerDom: [],
            hierarchy: []
        }
    },
    props: {
        sureBtnText: {
            type: String,
            default: 'sure'
        },
        cancelBtnText: {
            type: String,
            default: 'cancel'
        },
        defaultDate: {
            type: String,
            default: () => {
                const dd = new Date();
                return dd.getFullYear() + '/' + (dd.getMonth() + 1) + '/' + dd.getDate()
            }
        },
        startDate: {
            type: String,
            default: () => {
                const sd = new Date();
                return (sd.getFullYear() - 5) + '/' + (sd.getMonth() + 1) + '/' + sd.getDate()
            }
        },
        endDate: {
            type: String,
            default: () => {
                const ed = new Date();
                return (ed.getFullYear() + 5) + '/' + (ed.getMonth() + 1) + '/' + ed.getDate()
            }
        },
        hasYear: {
            type: Boolean,
            default: true
        },
        hasDate: {
            type: Boolean,
            default: true
        },
        hasMonth: {
            type: Boolean,
            default: true
        },
        type: {
            type: String,
            default: 'date'
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        init () {
            this.checkParam();
            setTimeout(() => {
                this.pickerDom = this.$refs.picker;
                const sum = this.pickerDom.length;
                for (let m = 0; m < sum; m++) {
                    this['datePicker' + m] = new BScroll(this.pickerDom[m], {
                        wheel: {
                            selectedIndex: this.hierarchy[m] || 0,
                            rotate: 33, 
                            adjustTime: 50, 
                            wheelWrapperClass: 'wheel-scroll', 
                            wheelItemClass: 'wheel-item'
                        }
                    });
                    this['datePicker' + m].on('scrollStart', (pos) => {
                        this.canClick = false;
                    })
                    this['datePicker' + m].on('scrollEnd', (pos) => {
                        this.updateData(pos, m);
                    });
                }
            }, 20)
        },
        checkParam () {
            const d = new Date();
            if (!this.startDate || new Date(this.startDate) === 'Invalid Date') {
                this.startDate = (d.getFullYear() -5) + '/' + (d.getMonth() + 1) + '/' + d.getDate();
            } 
            if (!this.endDate || new Date(this.endDate) === 'Invalid Date') {
                this.endDate = (d.getFullYear() + 5) + '/' + (d.getMonth() + 1) + '/' + d.getDate();
            } 
            if (!this.defaultDate || new Date(this.defaultDate) === 'Invalid Date') {
                this.defaultDate = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
            }
            if (this.defaultDate > this.endDate) this.defaultDate = this.endDate;
            if(this.defaultDate < this.startDate) this.defaultDate = this.startDate;

            const ss = this.startDate.split('/');
            const es = this.endDate.split('/');
            const ds = this.defaultDate.split('/');
            this.dateData.push(this.setData(ss[0] - 0,es[0] - 0));
            this.hierarchy.push(ds[0] - ss[0]);
            let temp = 0;
            if (ds[1]-0 < 11) {
                temp = new Date(new Date(ds[0] + '/' + (ds[1]-0+1) + '/01').getTime() - 24 * 60 * 60 * 1000).getDate();
            } else {
                temp = 31;
            }
            if (ds[0] > ss[0] && ds[0] < es[0]) {
                this.hierarchy.push(ds[1] - 1);
                this.hierarchy.push(ds[2] - 1);
                this.dateData.push([1,2,3,4,5,6,7,8,9,10,11,12]);
                this.dateData.push(this.setData(1, temp))
            } else if (ds[0] === ss[0]) {
                this.hierarchy.push(ds[1] - ss[1]);
                this.dateData.push(this.setData(ss[1] - 0, 12))
                if (ds[1] === ss[1]) {
                    this.hierarchy.push(ds[2] - ss[2]);
                    this.dateData.push(this.setData(ss[2] - 0, temp))
                } else {
                    this.hierarchy.push(ds[2] - 1);
                    this.dateData.push(this.setData(1, temp))
                }
            } else if (ds[0] === es[0]) {
                this.hierarchy.push(ds[1] - 1);
                this.dateData.push(this.setData(1, es[1]))
                if (ds[1] === es[1]) {
                    this.hierarchy.push(ds[2] - 1);
                    this.dateData.push(this.setData(1, es[2] - 0))
                } else {
                    this.hierarchy.push(ds[2] - 1);
                    this.dateData.push(this.setData(1, temp))
                }
            }
        },
        setData (start, end) {
            let d = [];
            for (let i = start; i < end + 1; i++) {
                d.push(i);
            }
            return d;
        },
        sureClick() {
            if (!this.canClick) return;
            let texts = [];
            for (let m = 0; m < this.hierarchy.length; m++) {
                texts.push(this.dateData[m][this.hierarchy[m]]);
            }
            if (!!!texts[texts.length]) {
                texts[texts.length -1] = this.dateData[this.dateData.length -1][this.dateData[this.dateData.length -1].length -1]
            }
            this.$emit('sureClick', this.hierarchy, texts);
        },
        cancelClick() {
            this.$emit('cancelClick');
        },
        updateData (pos, m) {
            const ss = this.startDate.split('/');
            const es = this.endDate.split('/');
            let delayer = 0;
            this.hierarchy[m] = Math.abs(pos.y/30);
            if (m === 0 || m === 1) {
                if (m === 0) {
                    delayer += 20;
                    if (pos.y - 0 === 0) {
                        this.$set(this.dateData, 1, this.setData(ss[1] - 0, 12));
                    } else if (Math.abs(pos.y/30) === es[0]-ss[0]) {
                        this.$set(this.dateData, 1, this.setData(1, es[1] - 0));
                    } else {
                        this.$set(this.dateData, 1, this.setData(1, 12));
                    }
                }
                this.timer1 = setTimeout(() => {
                    let temp = 0;
                    if (this.dateData[1][this.hierarchy[1]] < 12) {
                        temp = new Date(new Date(this.dateData[0][this.hierarchy[0]] + '/' + (this.dateData[1][this.hierarchy[1]]+1) + '/01').getTime() - 24 * 60 * 60 * 1000).getDate();
                    } else {
                        temp = 31;
                    }
                    if (this.hierarchy[0] === 0 && this.dateData[1][this.hierarchy[1]] === ss[1] - 0) {
                        this.$set(this.dateData, 2, this.setData(ss[2]-0, temp));
                    } else if (this.hierarchy[0] === es[0]-ss[0] && this.dateData[1][this.hierarchy[1]] === es[1] - 0) {
                        this.$set(this.dateData, 2, this.setData(1, es[2] - 0));
                    } else {
                        this.$set(this.dateData, 2, this.setData(1, temp));
                    }
                    clearTimeout(this.timer1);
                    this.timer2 = setTimeout(() => {
                        this.canClick = true;
                        clearTimeout(this.timer2);
                    }, 20)
                }, delayer)
            } else {
                this.canClick = true;
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
    cssStyle()
        z-index 1
        position absolute
        left 50%
        width 60%
        height 40%
        transform translateX(-50%)
        -webkit-transform translateX(-50%)
        content ''
    .picker
        position fixed
        top 0
        left 0
        width 100%
        height 100%
    .bg
        position absolute
        width 100%
        height 100%
        top 0
        left 0
        background-color rgba(0, 0, 0, .6)
    .piciker-cont
        position absolute
        bottom 0
        left 0
        width 100%
        background-color #fff
    .wheel-cont
        position relative
        width 100%
        height 150px
        overflow hidden
        padding-top 60px
        background-color #fff
        &::before
            top 0
            cssStyle()
            border-bottom 1px solid #ddd
            background -webkit-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0.3)))
            background -moz-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0.3)))
            background gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0.3)))
        &::after
            bottom 0
            cssStyle()
            border-top 1px solid #ddd
            background -webkit-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 1)))
            background -moz-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 1)))
            background gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 1)))
    .item
        width 100%
        height 30px
        text-align center
        line-height 30px
    .btns
        position relative
        width 100%
        height 40px
        border-bottom 1px solid #ddd
        background-color #fff
        div
            position absolute
            top 0
            width 60px
            font-size 16px
            text-align center
            line-height 40px
            cursor pointer
            &.sure
                right 0
                color cornflowerblue
            &.cancel
                left 0
                color #a0a0a0
    .picker-contain
        display flex
        display -webkit-flex
        > div {
            flex-grow 1
        }
</style>

        代码其实主要就是上面的这一段，代码了量不大，代码主要是分了三块，第一块是对参数进行校验，第二段是对datepicker进行初始化，第三段是在用户选择date的时候进行的一个数据展示的变化。最主要的一段逻辑在第三段，前面两段相对来说更容易，在用户滑动以后到最后选择到某一项的时候，会有一个调整位移到某一项的一个strenth的区域，这一块会消耗一点时间，这个是需要注意的，也是自测的时候不容易测出来的，在点击确认按钮的时候，需要左一层判断，如果还在作调整，是不能直接点击成功的，主要当选择项已经确定的时候才能点击成功，获取用户选择的数据。
        这里主要是在better-scroll的基础上又加了一层封装，就是组件的二次封装。如果大家有更好的想法欢迎和我一起讨论哦，技术不分国界不分年龄，一起探讨，一起进步~