详解怎么使用vue封装一个自定义日历组件

function setCalendarData() {  let i;  let date = 1;  const originData = [];  const firstRow = [];  // 设置第一行数据
  for (i = 0; i <= 6; i++) {    // 设置目标月份之前月份的日期数据
    if (i < calendarProps.target.firstDayIndex) {      const previousDate =
        calendarProps.previous.totalDays -
        calendarProps.target.firstDayIndex +
        (i + 1);
      firstRow.push({        dateObj: new Date(
          calendarProps.target.year,
          calendarProps.target.month - 1,
          previousDate
        ),        dateNumber: previousDate,        dateType: "previous"
      });
    } else {      // 设置目标月份当月的日期数据
      firstRow.push({        dateObj: new Date(
          calendarProps.target.year,
          calendarProps.target.month,
          date
        ),        dateNumber: date,        dateType: "current"
      });
      date++;
    }
  }
  originData.push(firstRow);  // 设置后面五行的数据
  for (let j = 0; j <= 4; j++) {    const rowData = [];    for (let k = 0; k <= 6; k++) {      // 设置目标月份剩下的日期数据
      if (date <= calendarProps.target.totalDays) {
        rowData.push({          dateObj: new Date(
            calendarProps.target.year,
            calendarProps.target.month,
            date
          ),          dateNumber: date,          dateType: "current"
        });
      } else {        // 设置目标月份下个月的日期数据
        const nextDate = date - calendarProps.target.totalDays;
        rowData.push({          dateObj: new Date(
            calendarProps.target.year,
            calendarProps.target.month + 1,
            nextDate
          ),          dateNumber: nextDate,          dateType: "next"
        });
      }
      date++;
    }
    originData.push(rowData);
  }
  calendarData.value = originData;
}复制代码