如何二次封装ElementUI中的日历组件

二次封装ElementUI中的日历组件可以使代码更加简洁和易于维护，同时也能提高开发效率。以下是一个简单的二次封装ElementUI中日历组件的示例：

1. 创建一个自定义的日历组件

<template>
  <el-date-picker
    v-model="value"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script>
export default {
  name: 'MyDatePicker',
  props: {
    value: {
      type: Array,
      default: () => [null, null]
    },
    pickerOptions: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

2. 在父组件中使用自定义的日历组件

<template>
  <div>
    <my-date-picker v-model="dateRange" :picker-options="pickerOptions" />
  </div>
</template>

<script>
import MyDatePicker from '@/components/MyDatePicker.vue'

export default {
  components: {
    MyDatePicker
  },
  data() {
    return {
      dateRange: [null, null],
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        }
      }
    }
  }
}
</script>

在以上代码中，我们创建了一个名为MyDatePicker的组件，该组件接受一个value属性和一个pickerOptions属性，其中value属性是一个数组，用于绑定选中的日期范围，pickerOptions属性是一个选项对象，用于配置日期选择器的一些选项，例如禁用未来日期等。在父组件中使用MyDatePicker组件时，我们可以通过v-model指令绑定选中的日期范围，并通过picker-options属性向MyDatePicker组件传递选项对象。

通过以上的二次封装，我们可以在多个页面中复用MyDatePicker组件，同时也可以通过修改pickerOptions属性来改变日期选择器的行为，这样可以大大提高代码的复用性和可维护性。