自己写的vue组件，仿ios日历，支持年月日时分

完美主持移动端，rem布局（我用了stylus，你可以改成less或者sass），font-size基础值/75，默认开始时间为当前

效果时间

效果图

贴代码

<template>
  <div class="datepicker" @touchmove.prevent>
    <transition name="fade" mode="out-in">
      <div class="pickerBoxBg" v-show="show" @click="show = false" @touchmove="_stopDef" @mousewheel="_stopDef">
        <div class="pickerBox" v-show="show" @mousewheel="_stopDef">
          <div class="pickerBoxWrapper">
            <div class="pickerBoxTitle">
              <h2>{
  {title}}</h2>
              <h3>请选择日期</h3>
              <ul>
                <li>年</li>
                <li>月</li>
                <li>日</li>
                <li>时</li>
                <li>分</li>
              </ul>
            </div>
            <div class="pickerBoxContent">
              <div class="pickerBoxContentList">
                <ul
                  :class="{'first_dragging': yearState.dragging}"
                  @touchstart="_onTouchStart('year', $event)"
                  @mousedown="_onTouchStart('year', $event)"
                  :style="{'transform' : 'translate3d(0,' + yearState.translateY + 'px, 0)'}">
                  <li></li>
                  <li></li>
                  <li></li>
                  <li
                    ref="list-box"
                    v-for="(item, index)
                  in yearState.data"
                    :key="index"
                    :class="{
                          'current': item === yearState.selectedId,
                          'node1':  Math.abs(index - yearState.index) == 1,
                          'node2':  Math.abs(index - yearState.index) == 2,
                          'node3':  Math.abs(index - yearState.index) >= 3
                      }">
                    {
  {item}}
                  </li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </div>
              <div class="pickerBoxContentList">
                <ul
                  :class="{'second_dragging': monthState.dragging}"
                  @touchstart="_onTouchStart('month', $event)"
                  @mousedown="_onTouchStart('month', $event)"
                  :style="{'transform' : 'translate3d(0,' + monthState.translateY + 'px, 0)'}">
                  <li></li>
                  <li></li>
                  <li></li>
                  <li
                    v-for="(item, index) in monthState.data"
                    :key="index"
                    :class="{
                          'current': item === monthState.selectedId,
                          'node1':  Math.abs(index - monthState.index) == 1,
                          'node2':  Math.abs(index - monthState.index) == 2,
                          'node3':  Math.abs(index - monthState.index) >= 3
                  }">
                    {
  {item}}
                  </li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </div>
              <div class="pickerBoxContentList">
                <ul
                  ref:area-list
                  :class="{'third_dragging': dayState.dragging}"
                  @touchstart="_onTouchStart('day', $event)"
                  @mousedown="_onTouchStart('day', $event)"
                  :style="{'transform' : 'translate3d(0,' + dayState.translateY + 'px, 0)'}">
                  <li></li>
                  <li></li>
                  <li></li>
                  <li
                    v-for="(item, index) in dayState.data"
                    :key="index"
                    :class="{
                      'current': item === dayState.selectedId,
                      'node1':  Math.abs(index - dayState.index) &#