基于elementui的日期时间组件，进行二次封装

//封装组件的页面，该组件带有最近四周的快捷选项，且在选择好开始和结束日期后，会进行校验，若日期时间范围超过30天，则会进行错误提示

<template>

  <div>

    <el-date-picker

      v-model="time"

      type="daterange"

      range-separator="至"

      start-placeholder="开始日期"

      end-placeholder="结束日期"

      value-format="yyyy-MM-dd"

      clearable

      style="margin-right: 20px"

      unlink-panels

      :picker-options="pickerOptions"

      @change="checkTime"

    >

    </el-date-picker>

  </div>

</template>

<script>

export default {

  data() {

    return {

      time: [],

      pickerOptions: {

        shortcuts: [

          {

            text: "最近一周",

            onClick(picker) {

              const end = new Date();

              const start = new Date();

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);

              picker.$emit("pick", [start, end]);

            },

          },

          {

            text: "最近两周",

            onClick(picker) {

              const end = new Date();

              const start = new Date();

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);

              picker.$emit("pick", [start, end]);

            },

          },

          {

            text: "最近三周",

            onClick(picker) {

              const end = new Date();

              const start = new Date();

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 21);

              picker.$emit("pick", [start, end]);

            },

          },

          {

            text: "最近一个月",

            onClick(picker) {

              const end = new Date();

              const start = new Date();

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);

              picker.$emit("pick", [start, end]);

            },

          },

        ],

      },

    };

  },

  methods: {

    checkTime() {

      console.log('change')

      if (this.time) {

        const start = new Date(this.time[0]).getTime();

        const end = new Date(this.time[1]).getTime();

        const dayNum = (end - start) / 1000 / 60 / 60 / 24;

        if (dayNum > 30) {

         this.time = []

         return this.$message.error("日期范围不能超过30天");

        }

      else{

      //选择日期时间成功后，触发自定义事件

            this.$emit('dateChange',this.time)

      }  

      }

    },

  },

};

</script>

//引入组件的页面

import datePicker from "@/components/datePicker/index.vue";

 <datePicker    @dateChange="handleDateChange" ></datePicker>

//绑定自定义事件，获取选择的日期时间，函数中的time是当前页面data中定义的数据

handleDateChange(value) {

      this.time = value;

    },