首次使用Mint UI的DatetimePicker遇坑

1.首先引入Mint UI 的DatetimePicker组件

main.js

import MintUI from 'mint-ui'
Vue.use(MintUI);

或者：

import {DatetimePicker } from 'mint-ui'
Vue.component(DatetimePicker.name, DatetimePicker)

2.index.vue中使用

<div class="data-input" @click="openPicker">{{dataItems.procurementDate || '请输入采购时间'}}</div>




<div class="datePicker">
        <mt-datetime-picker
          type="date"
          ref="picker"
          v-model="defaultDate"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          @confirm="handleConfirm"
          :startDate="startDate"
        ></mt-datetime-picker>
 </div>

3.  数据

data() {
    return {
      dataItems: {
        procurementDate: ""
      },
      defaultDate: "", //默认时间
      startDate: new Date("1990-01-01") //起始时间
    };
  },
  methods: {
    //打开时间弹出 2019/10/16
    openPicker() {
      let vm = this;
      if (vm.dataItems.procurementDate) {
        vm.defaultDate = vm.dataItems.procurementDate;
      } else {
        vm.defaultDate = new Date();
      }
      this.$refs.picker.open();
    },
    //选择时间后确认 2019/10/16
    handleConfirm(data) {
      let vm = this;
      vm.dataItems.procurementDate = this.formatDate(data);
      console.log(this.formatDate(data));
    },

    //时间格式化 2019/10/16
    formatTen(num) {
      return num > 9 ? num + "" : "0" + num;
    },
    formatDate(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      return year + "-" + this.formatTen(month) + "-" + this.formatTen(day);
    },

5.修改默认样式

/* 修改时间组件的默认样式  2019/10/16 */
.receive-set-box >>> .picker-slot-wrapper {
  /* transform: translate(0px, 30px) translateZ(0px) !important; 此处的目的本来是
  想去除日期组件弹出层最上方有一块空白的，次方法不可以，解决空白行的方法为v-model 绑定默认值new Date,即可解决初始打开日期组件上方空白现象*/  
  font-size: 28px;
}

.receive-set-box >>> .picker-toolbar {
  height: 80px !important;
  line-height: 80px !important;
}

.receive-set-box >>> .picker-toolbar .mint-datetime-action {
  line-height: 80px !important;
  font-size: 28px !important;
}