vue2二次封装 el-date-picker 日期范围组件

在Vue2中，如果想对Element UI的`el-date-picker`日期选择器组件进行二次封装，通常会创建一个新的自定义组件，以便更精细地控制组件的行为、样式以及与其他部分的交互。这涉及到几个步骤：

1. **引入依赖**：首先，在项目里安装需要的依赖，如`element-ui`和`vue-class-component`（用于声明类组件）。

npm install element-ui vue-class-component

2. **创建组件**：创建一个新的Vue组件文件，例如`DateRangePicker.vue`，并使用`Vue.extend`或`mixins`结合`el-date-picker`。

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

<script>
import { Component, Prop } from 'vue-property-decorator';

@Component({
  name: 'CustomDateRangePicker',
  components: {
    ElDatePicker: {
      // 使用Vue.extend或mixins替换Element的原生组件
      extend: Element.UI DatePicker,
    },
  },
})
export default class DateRangePicker extends Vue {
  @Prop() pickerOptions: any; // 接收配置选项

  startDate = '';
  endDate = '';

  mounted() {
    this.$refs.datePicker.focus(); // 设置焦点
  }
}
</script>

3. **属性和事件处理**：暴露必要的公共属性供外部使用，并处理用户交互或接收外部传递的数据。

4. **复用和定制**：你可以通过这个封装后的组件在项目中多次复用，并根据需要调整其样式、功能或响应式特性。