elementplus 日期选择限制过去三天可选

ElementPlus是一个基于Vue.js的UI组件库，它提供了丰富的、易于使用的界面元素。对于日期选择器的功能，如果你想要在ElementPlus的日历组件中设置一个限制，让用户只能选择过去的三天，你可以通过`v-model`绑定一个计算属性，并在该属性中实现这个逻辑。下面是一个简单的示例：

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

<script setup>
import { ref } from 'vue';

const selectedDate = ref(null);
let customPickerOptions = {
  disabledDates(current) {
    // 验证日期是否在过去三天内
    const today = new Date();
    const maxThreeDaysAgo = today.subtract(3, 'days');
    return current.valueOf() > maxThreeDaysAgo.valueOf(); // 如果当前日期大于三天前，则禁用
  },
};

// 更新selectedDate值时，也会更新pickerOptions的disabledDates
watch(selectedDate, (value) => {
  if (value && value.length === 2) {
    customPickerOptions.disabledDates(value[1]);
  }
});
</script>

在这个例子中，我们设置了`disabledDates`选项，在用户尝试选择未来的日期时返回`true`，阻止其选择。当用户选择的日期范围改变时，我们会重新校验第二个日期。