src/sfc/TimeSinglePicker.vue
@@ -1,7 +1,5 @@
<!-- 单个 日期时间选择器组件   带日周月快捷选项
  前一天是当前时间的前一天的00点到23:59:59
  前七天 和 上一个月同样
  会将初始默认时间(一周前)和改变的时间通过事件‘submitTime’传递给父组件
<!-- 单个 日期时间选择器组件
  将初始默认时间(一周前)和改变的时间通过事件‘submitTime’传递给父组件
  
  初始渲染时就将时间传递给父组件:
  ** 
@@ -11,16 +9,24 @@
-->
<script>
import dayjs from 'dayjs'
import time from '@/utils/time.js'
export default {
  props: {
    // 父组件传入的时间
    selectedTime: {
      type: String,
      // type: [String,null],
      default: ''
    },
    // 是否设置只读属性
    readOnly: {
      type: Boolean,
      default: false
    },
    isUTC: {
      type: Boolean,
      default: false
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
@@ -28,38 +34,37 @@
  emits: ['submitTime'],
  data() {
    return {
      time: '',
      shortcuts: []
      time: ''
    }
  },
  // watch: {
  //   selectedTime(newVal) {
  //     console.log('time', this.selectedTime)
  //     if (newVal != '') {
  //       this.time = this.selectedTime
  //     }
  //   }
  // },
  mounted() {
    console.log('time', this.selectedTime)
    this.time = this.selectedTime
  watch: {
    selectedTime(newVal) {
      if (newVal != '') {
        // this.time = time.utcToStr(this.selectedTime)
        this.time = this.selectedTime
      }
    }
  },
  mounted() {
    this.time = time.utcToStr(this.selectedTime)
  },
  methods: {
    change() {
      if (this.time != null) {
        let t = time.utcTime(this.time)
        this.isUTC ? this.$emit('submitTime', t) : this.$emit('submitTime', this.time)
      } else {
        this.$emit('submitTime', this.time)
      }
    }
  }
}
</script>
<template>
  <el-date-picker
    v-model="time"
    type="datetime"
    placeholder="选择时间"
    :shortcuts="shortcuts"
    value-format="YYYY-MM-DD HH:mm:ss"
    @change="$emit('submitTime', time)"
  />
  <el-date-picker v-model="time" type="datetime" placeholder="选择时间" @change="change" />
</template>
<style scoped></style>