vue3 el-date-picker 限制时间跨度一年

在Vue3中使用Element UI的el-date-picker组件限制时间跨度一年的方法如下：
1. 在template中使用el-date-picker组件，并设置type为daterange，同时绑定v-model和value-format属性。
2. 在data中定义pickDate对象，用于存储选中的开始和结束日期。
3. 在methods中定义getPickDate方法，用于获取选中的开始和结束日期，并将其存储到pickDate对象中。
4. 在pickerOptions中定义disabledDate方法，用于禁用超过一年的日期。
具体实现代码如下：

<template>
<el-date-picker
v-model="pickDataList"
type="daterange"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="getPickDate"
></el-date-picker>
</template>

<script>
export default {
data() {
return {
pickDataList: [], // el-date-picker v-model的值
pickDate: {}, // 存放getPickDate获取的数据
pickerOptions: {
disabledDate: this.disabledDate
}
};
},
methods: {
getPickDate() {
const [start, end] = this.pickDataList;
this.pickDate = { start, end };
},
disabledDate(date) {
const { start } = this.pickDate;
if (start) {
const diff = Math.abs(start.valueOf() - date.valueOf());
if (diff > 1000 * 3600 * 24 * 365) {
return true;
}
}
}
}
};
</script>