[DatePicker] Error when user click the popup-mask or cancel button when popup is animating.

[Akimyou]

在生产上发现部分用户手机比较卡的情况下，用户在 popup 动画还未完成时候点击了 popup-mask 或者 cancel 按钮后，触发了一个错误。

https://github.com/didi/mand-mobile/blob/master/components/date-picker/index.vue

oldColumnData 初始化值为 null，存在 this.columnData = [...this.oldColumnData] 的时候，oldColumnData 还为 null 的情况。

---

Mand Mobile Version

1.5.2

OS Version & Browser Version

macOS 10.13.4 (17E199) & Chrome 70.0.3538.102

Recurring Steps

1. set popup animate to slow.

  // mand-mobile/components/date-picker/index.vue
  &.top, &.bottom, &.left, &.right
    .md-popup-box
      // transition all .3s
      transition all 3s

2. click popup-mask or cancel button when popup is animating.

Expectant Behaviors

No error.

Actual Behaviors

Throw error.

TypeError: Invalid attempt to spread non-iterable instance

In mand-mobile/components/date-picker/index.vue
https://github.com/didi/mand-mobile/blob/master/components/date-picker/index.vue

  data () {
    return {
      isPickerShow: false,
      currentDateIns: new Date(),
      columnData: [],
      oldColumnData: null, // initial value is null
      columnDataDefault: [],
      columnDataGenerator: [],
      disabledCascadeComlumnIndex: [] // columns do not need cascading
    }
  },
 // .....

    $_onPickerShow () {
      this.oldColumnData = [...this.columnData] // copy form columnData when  $_onPickerShow (popup animation is done)
      this.$emit('show')
    },
// .....
    $_onPickerCancel () {
      this.$emit('cancel')
      this.columnData = [...this.oldColumnData] // oldColumnData's value may be null when popup is animating
    },