element 之 el-date-picker组件封装

1.封装组件

<template>
  <div>
    <el-date-picker
      :size="sizeA"
      class="w125"
      type="date"
      placeholder="选择开始日期"
      v-model="activityInfo.start_time"
      :picker-options="pickerBeginDateBefore"
      value-format="yyyy-MM-dd 00:00:00"
    ></el-date-picker>
    ~
    <el-date-picker
      :size="sizeA"
      class="w125"
      type="date"
      v-model="activityInfo.end_time"
      :picker-options="pickerBeginDateAfter"
      placeholder="选择结束日期"
      value-format="yyyy-MM-dd 23:59:59"
      :disabled="activityInfo.is_long"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  name: "WTimer",
  props: {
    activityInfo: {
      type: Object,
    },
    sizeA: {
      type: String,
      default: 'mini',
    },
  },
  data() {
    return {
      startDate: "",
      endDate: "",
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          // if 判断另一项为空时可以随便选择时间
          if (this.activityInfo.end_time) {
            return (
              time.getTime() > new Date(this.activityInfo.end_time).getTime()
            );
          } else {
            return false;
          }
        },
      },
      pickerBeginDateAfter: {
        disabledDate: (time) => {
          if (this.activityInfo.start_time) {
            return (
              time.getTime() <
              new Date(this.activityInfo.start_time).getTime() -
                (1 * 24 * 60 * 60 - 1) * 1000
            );
          } else {
            return false;
          }
        },
      },
    };
  },

  mounted() {},

  methods: {},
};
</script>
<style lang="scss" scoped>
@import "../../style/variable.scss";
/deep/.el-input--mini {
  width: $el-input-mini;
}
</style>

2.引用组件

 	<datePicker
      :activityInfo="activityInfo"
       :sizeA="sizeA"
     ></datePicker>

import datePicker from "@/components/DateField/date-picker";

export default {
 components: {datePicker},
  data() {
    return {
      sizeA:'mini',
      activityInfo: {
        start_time: "",
        end_time: "",
        is_long: false,
      },
    },
  created() {
      consol.log(this.activityInfo.start_time)
      consol.log(this.activityInfo.end_time)
  },
}