基于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() +