利用vue-awesome-picker模仿支付宝做的一个时间控件

 

vue-awesome-picker 做时间控件的时候 好像只有点确定 才可以返回值  滑动时间的时候好像没有事件可以调用于是把他的源码直接拿过来用一下

做成组件形式

其中import awesomeDate from "../../components/awesome-date/awesome-date"; 是直接用的vue-awesome-picker的源码

对awesome-date源码进行分析的时候发现

_createWheel (wheelWrapper, i) {
  if (!this.wheels[i]) {
    const wheel = this.wheels[i] = new BScroll(wheelWrapper.children[i], {
      wheel: {
        selectedIndex: 0,
        rotate: 25
      },
      swipeTime: this.swipeTime
    })
    wheel.on('scrollEnd', () => {
      this._cascadePickerChange(i)
    })
  } else {
    this.wheels[i].refresh()
  }
  return this.wheels[i]
},

每次createWheel的时候 wheel.on 绑定了一个 scrollEnd 方法 this._cascadePickerChange(i)

找到_cascadePickerChange方法添加

let currentData = this._getCurrentValue(); 
this.$emit("scrollUpdateData", currentData);

这样就可以得到所选择的日期的值了 又因为我是选择一个一个年 再重新给月份赋值（发现官网的级联有问题 只有最开始赋值就没问题 在data()里面赋值就没问题，后面动态赋的值有问题 所以就选择一个年赋一会月的值） 所以得到的月份一直都停留在之前的值，所以要在每次改变值的时候拿到默认（第一个）月份的值

再分析源码 每次有值改变的时候 都会调用_reloadWheel方法 之前原有的代码不变加上自己需要的代码

所以

_reloadWheel (index, data) {
        const wheelWrapper = this.$refs.wheelWrapper
        let scroll = wheelWrapper.children[index].querySelector('.wheel-scroll')
        let wheel = this.wheels ? this.wheels[index] : false
        let dist = 0
        if (scroll && wheel) {
          this.$set(this.pickerData, index, data)
          this.pickerAnchor[index] = dist
          this.$nextTick(() => {
            wheel = this._createWheel(wheelWrapper, index)
            wheel.wheelTo(dist)
          })
        }
        let currentData = this._getCurrentValue();
        this.$emit("scrollUpdateData", currentData);
        return dist
      },