如何实现日历组件封装

创建一个新的 Vue 组件，命名为 CalendarPicker 或者其他合适的名称。

在组件中引入 el-date-picker 组件，并根据需求对其进行定制和封装。

可以通过 props 接收传入的日期格式、日期范围等参数，以便灵活配置日历组件的显示方式。

可以通过事件（event）向父组件传递用户选择的日期信息。

<template>
<el-date-picker
v-model="selectedDate"
type="date"
:format="dateFormat"
:picker-options="pickerOptions"
@change="handleDateChange"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
selectedDate: '', // 选择的日期
dateFormat: 'yyyy-MM-dd', // 日期格式
pickerOptions: { // 日期范围限制
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; // 禁用过去的日期
}
}
};
},
methods: {
handleDateChange(value) {
this.$emit('date-selected', value); // 向父组件传递选择的日期
}
}
};
</script>

以上示例中，CalendarPicker 组件封装了 el-date-picker 组件，并通过 props 接收了日期格式和日期范围的配置参数。在用户选择日期后，通过事件向父组件传递了所选的日期信息。