对Element DatePicker时间组件的封装，时间组件开始时间和结束时间绑定

**Element DatePicker 时间组件封装**
=====================================在 Element UI 中，我们经常使用 `DatePicker` 组件来选择日期。然而，在某些情况下，我们可能需要对其进行封装，以实现特定的功能，例如时间范围的限制。以下是对 `DatePicker` 的封装，实现开始时间和结束时间的绑定。

**封装组件**
-------------

首先，我们创建一个新的 Vue 组件，名为 `DateRangePicker`：

javascript// DateRangePicker.vue<template>
 <div>
 <!-- 开始时间 -->
 <el-date-picker v-model="startDate"
 type="date"
 placeholder="选择开始日期"
 @change="handleStartDateChange">
 </el-date-picker>

 <!-- 结束时间 -->
 <el-date-picker v-model="endDate"
 type="date"
 placeholder="选择结束日期"
 @change="handleEndDateChange">
 </el-date-picker>
 </div>
</template>

<script>
export default {
 data() {
 return {
 startDate: '',
 endDate: ''
 }
 },
 methods: {
 handleStartDateChange(val) {
 // 开始时间改变时，更新结束时间的最小值 this.endDate = val;
 },
 handleEndDateChange(val) {
 // 结束时间改变时，更新开始时间的最大值 this.startDate = val;
 }
 }
}
</script>

javascript// App.vue<template>
 <div>
 <!-- 使用 DateRangePicker 组件 -->
 <date-range-picker v-model="dateRange" />
 </div>
</template>

<script>
import DateRangePicker from './DateRangePicker.vue';

export default {
 components: { DateRangePicker },
 data() {
 return {
 dateRange: ''
 }
 }
}
</script>

javascript// DateRangePicker.vue<template>
 <div>
 <!-- 开始时间 -->
 <el-date-picker v-model="startDate"
 type="date"
 placeholder="选择开始日期"
 @change="handleStartDateChange">
 </el-date-picker>

 <!-- 结束时间 -->
 <el-date-picker v-model="endDate"
 type="date"
 placeholder="选择结束日期"
 @change="handleEndDateChange">
 </el-date-picker>
 </div>
</template>

<script>
export default {
 data() {
 return {
 startDate: '',
 endDate: ''
 }
 },
 methods: {
 handleStartDateChange(val) {
 // 开始时间改变时，更新结束时间的最小值 this.endDate = val;
 // 设置结束时间的最大值为当前日期 this.endDateMax = new Date();
 },
 handleEndDateChange(val) {
 // 结束时间改变时，更新开始时间的最大值 this.startDate = val;
 // 设置开始时间的最小值为当前日期 this.startDateMin = new Date();
 }
 }
}
</script>