记录项目中封装的组件和逻辑方法

算是一个小小的经验总结吧：背景：用的是vue2+ts+element； 业务场景；要求时间选择框，要只能选择周期范围是 7 天，当天不能选择； 实现；ok，担心，在原有的组件做改动，会出现一些不可描述问题，那就自己整一个，也是对自己技术的一次考察既然有了现成的决心，那就上代码；

<template>
  <div>
    <el-card class="mod-card mod-table" shadow="never">
      <el-date-picker
        size="small"
        v-model="dateRange"
        type="daterange"
        :picker-options="pickerOptions"
        @change="handleDateChange"
        placeholder="选择日期范围"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </el-card>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";

@Component
export default class DateRangePicker extends Vue {
  @Prop({ type: Array, default: () => [] }) readonly initialDateRange!: Date[];

  dateRange: Date[] = this.initialDateRange;

  get pickerOptions() {
    return {
      disabledDate: (time: Date) => {
        const today = new Date();
        today.setHours(0, 0, 0, 0); // 设置为今天的开始时间

        // 禁止选择今天及之后的日期
        return time.getTime() >= today.getTime();
      },
    };
  }

  @Emit("date-range-changed")
  handleDateChange() {
    // 确保选择的日期范围在过去 7 天内
    if (this.dateRange.length === 2) {
      const startDate = new Date(this.dateRange[0]);
      const endDate = new Date(this.dateRange[1]);
      const today = new Date();
      today.setHours(0, 0, 0, 0); // 设置为今天的开始时间
      const sevenDaysAgo = new Date();
      sevenDaysAgo.setDate(today.getDate() - 7); // 计算 7 天前的日期

      // 如果选择的日期范围超过 7 天，则重置
      if (endDate.getTime() - startDate.getTime() > 7 * 24 * 60 * 60 * 1000) {
        this.dateRange = []; // 或者可以设置为一个合理的默认值
        this.$message.warning("选择的日期范围不能超过 7 天");
      } 
    }
    return this.dateRange;
  }
}
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>

这是一套子组件，已经做了业务场景的限制，为什么要封装组件呢，因为这种业务场景要在不同的地方复用，并且能减少父组件的庞大的代码量，在设计代码的时候已经尽量保持优雅了，如果有大神，可以多多来进行指导； 既然子组件已经完成，他爹就得用一下子；

 <el-card
      class="mod-card mod-table"
      shadow="never"
    >
      <DateRangePicker
        @date-range-changed="handleDateRangeChange"
        :initialDateRange="defaultDateRange"
        :initialStartDate="startDate"
        :initialEndDate="endDate"
      />
    </el-card>
    ......此处省略无关code,
  created() {
    this.defaultDateRange[0] = this.getDateBeforeDays(7);
    this.defaultDateRange[1] = this.getDateBeforeDays(1);
    this.startDate = this.defaultDateRange[0];
    this.endDate = this.defaultDateRange[1];

  }
     //获取当日前一天的前数据
  getDateBeforeDays(days: any) {
    const date = new Date();
    date.setDate(date.getDate() - days);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
  // 日期范围
  defaultDateRange: string[] = [];
  startDate: string = '';
  endDate: string = '';
    
    handleDateRangeChange(dateRange: { startDate: string; endDate: string }) {
    this.startDate = dateRange.startDate;
    this.endDate = dateRange.endDate;
    this.getList()//刷新主页面列表的方法;
  }

这样此功能就大功告成了；效果请自行复制