Vue 사용자 정의 달력 구성 요소를 캡슐화하는 방법에 대한 심층 분석

이 기사에서는 프런트 엔드 캘린더에 대한 관련 지식을 제공합니다. 주로 사용자 정의 캘린더 구성 요소를 캡슐화하는 방법에 대해 설명합니다. 관심 있는 친구는 아래를 살펴보고 모든 사람에게 도움이 되기를 바랍니다.

서문

우리 모두 알고 있듯이 일반적으로 프로젝트에서 달력 구성 요소를 사용해야 하는 경우 타사 UI 라이브러리의 구성 요소나 기성 타사 플러그에서 사용되는 경우가 많습니다. -인. 많은 친구들은 달력 구성 요소를 처음 볼 때 무의식적으로 그것이 매우 복잡하고 시작할 방법이 없다고 생각합니다. 그런데 이 캘린더 플러그인의 소스코드를 읽어보니 생각보다 복잡하지 않다는 것을 알게 되었습니다. 저는 달력 컴포넌트를 만들려면 해당 연도를 기준으로 최소 10년 전후의 달력 데이터를 확보해야 다음 개발 단계를 진행할 수 있다는 어리석은 생각을 하곤 했습니다.

그런데 dycalendar.js 소스코드를 읽어보니 한편으로는 제가 너무 멍청하고 문제가 너무 복잡하다는 생각이 들었습니다. 작가님의 명확한 사고방식도 존경스럽습니다. 읽고 나니 많은 유익을 얻었다는 생각이 듭니다.

저자의 아이디어 로직을 정리한 후, 이 아이디어를 바탕으로 Vue 컴포넌트를 개발했습니다. 아래 그림과 같이:

다음으로, 나를 따라 자신만의 달력 구성 요소를 개발하는 방법을 알아보세요.

핵심 코드 구현

1. 아이디어 정리

• 대상 날짜 데이터 가져오기
• 올해, 이번 달, <code>현재 날짜, 현재 요일, 이번 달의 일 수, 첫 번째 이번 달의 날짜는 요일에 해당합니다. 며칠, 지난달에 몇 일이 있었는지 등. 当前年，当前月，当前日期，当前星期几，当前月一共有几天，当前月的第一天对应的是星期几，上个月总共有多少天等。
• 根据这些属性，来生成具体的日历日期数据列表，然后将其循环渲染到模板中。
• 当切换月份的时候，获取到新的目标日期对应的各项关键数据。vue检测到日历属性变化之后，通知页面进行更新。

2、初始化所需要的数据

一般来说，成熟的日历组件，日期都是一个双向绑定的变量。为了方便使用，我们也采用双向绑定的方式。

<script setup>
import { reactive, ref, computed, watch } from "vue";

const props = defineProps({
  modelValue: Date,
});

const emits = defineEmits(["update:modelValue"]);

/**
 * 最小年份
 */
const MIN_YEAR = 1900;
/**
 * 最大年份
 */
const MAX_YEAR = 9999;

/**
 * 目标日期
 */
const targetDate = ref(props.modelValue);

接下来，我们还需要初始化一些常量用来表示月份和日期：

/**
 * 有关月度的名称列表
 */
const monthNameList = {
  chineseFullName: [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ],
  fullName: [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ],
  mmm: [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ],
};
/**
 * 有关周几的名称列表
 */
const dayNameList = [
  {
    chineseFullName: "周日",
    chineseShortName: "日",
    fullName: "Sunday",
    shortName: "Sun",
    dayNumber: 0,
  },
  {
    chineseFullName: "周一",
    chineseShortName: "一",
    fullName: "Monday",
    shortName: "Mon",
    dayNumber: 1,
  },
  {
    chineseFullName: "周二",
    chineseShortName: "二",
    fullName: "Tuesday",
    shortName: "Tue",
    dayNumber: 2,
  },
  {
    chineseFullName: "周三",
    chineseShortName: "三",
    fullName: "Wednesday",
    shortName: "Wed",
    dayNumber: 3,
  },
  {
    chineseFullName: "周四",
    chineseShortName: "四",
    fullName: "Thursday",
    shortName: "Thu",
    dayNumber: 4,
  },
  {
    chineseFullName: "周五",
    chineseShortName: "五",
    fullName: "Friday",
    shortName: "Fri",
    dayNumber: 5,
  },
  {
    chineseFullName: "周六",
    chineseShortName: "六",
    fullName: "Saturday",
    shortName: "Sat",
    dayNumber: 6,
  },
];

接下来，准备几个vue的响应式数据：

/**
 * 今日
 */
const today = new Date();

/**
 * 日历的各项属性
 */
const calendarProps = reactive({
  target: {
    year: null,
    month: null,
    date: null,
    day: null,
    monthShortName: null,
    monthFullName: null,
    monthChineseFullName: null,
    firstDay: null,
    firstDayIndex: null,
    totalDays: null,
  },
  previous: {
    totalDays: null,
  },
});

/**
 * 用于展现的日历数据
 */
const calendarData = ref([]);

3、初始化日历的各项属性

接下来，通过setCalendarProps方法获取日历的各个属性，逐个填充calendarProps中的数据：

function setCalendarProps() {
  if (!targetDate.value) {
    targetDate.value = today;
  }
  // 获取目标日期的年月日星期几数据
  calendarProps.target.year = targetDate.value.getFullYear();
  calendarProps.target.month = targetDate.value.getMonth();
  calendarProps.target.date = targetDate.value.getDate();
  calendarProps.target.day = targetDate.value.getDay();

  if (
    calendarProps.target.year < MIN_YEAR ||
    calendarProps.target.year > MAX_YEAR
  ) {
    console.error("无效的年份，请检查传入的数据是否是正常");
    return;
  }

  // 获取到目标日期的月份【中文】名称
  let dateString;
  dateString = targetDate.value.toString().split(" ");
  calendarProps.target.monthShortName = dateString[1];
  calendarProps.target.monthFullName =
    monthNameList.fullName[calendarProps.target.month];
  calendarProps.target.monthChineseFullName =
    monthNameList.chineseFullName[calendarProps.target.month];
  // 获取目标月份的第一天是星期几，和在星期几中的索引值
  const targetMonthFirstDay = new Date(
    calendarProps.target.year,
    calendarProps.target.month,
    1
  );
  calendarProps.target.firstDay = targetMonthFirstDay.getDay();
  calendarProps.target.firstDayIndex = dayNameList.findIndex(
    (day) => day.dayNumber === calendarProps.target.firstDay
  );

  // 获取目标月份总共多少天
  const targetMonthLastDay = new Date(
    calendarProps.target.year,
    calendarProps.target.month + 1,
    0
  );
  calendarProps.target.totalDays = targetMonthLastDay.getDate();

  // 获取目标月份的上个月总共多少天
  const previousMonth = new Date(
    calendarProps.target.year,
    calendarProps.target.month,
    0
  );
  calendarProps.previous.totalDays = previousMonth.getDate();
}

需要注意的一个知识点是，在获取本月多少天和上个月多少天的时候，都将date值设置为了0。这是因为当date值为0的时候，返回的Date对象是上个月的最后一天。所以说，为了获取本月多少天，需要将本月的month值加1。

执行这个方法之后，此时calendarProps的值为：

4、根据日历属性生成日历日期的数据

当我们已经知道本月第一天对应的周几索引值、本月一共有多少天和上个月一共有多少天这三个核心数据之后，就可以开始生成对应的日历数据了。

思路如下：

1. 由于大部分情况下，本月的第一天不是从头开始的，之前的部分是上个月的日期。所以第一行要单独进行处理。
2. 设置一个公用的date数值，初始值设置为1。然后从本月第一天对应的周几索引值开始进行递增。本月之前的日期和之后的日期设置一个算法进行计算。
3. 为了方便之后进行日期切换、样式区分，将生成的数据加工成一个对象，其中包含日期类型——dateType，表示是本月还是上月还是下月；

/**
 * 生成日历的数据
 */
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;
}

至此，这个日历组件的核心部分的逻辑就已经实现了。你看，是不是很简单？

接下来，我们只需要根据calendarData

이러한 속성을 기반으로 특정 캘린더 날짜 데이터 목록을 생성한 다음 이를 루프의 템플릿으로 렌더링합니다. 🎜🎜월을 전환할 때 새로운 목표 날짜에 해당하는 주요 데이터를 가져옵니다. vue는 달력 속성의 변경 사항을 감지한 후 페이지에 업데이트를 알립니다. 🎜

2. 초기화에 필요한 데이터🎜🎜일반적으로 성숙한 달력 구성 요소에서 날짜는 양방향 바인딩 변수입니다. 사용 편의성을 위해 양방향 바인딩도 사용합니다. 🎜rrreee🎜다음으로 월과 날짜를 나타내는 일부 상수도 초기화해야 합니다. 🎜rrreee🎜다음으로 Vue에 대한 일부 반응 데이터를 준비합니다. 🎜rrreee

3. 달력의 속성🎜🎜다음으로 setCalendarProps 메소드를 통해 달력의 다양한 속성을 얻고 calendarProps에 데이터를 하나씩 입력합니다. 🎜rrreee

🎜주의사항 한 가지 지식 포인트는 이번 달의 일수와 지난 달의 일수를 얻을 때 날짜 값이 0으로 설정된다는 것입니다. 날짜 값이 0일 때 반환되는 Date 객체는 이전 달의 마지막 날이기 때문입니다. 따라서 이번 달의 일수를 얻으려면 이번 달의 월 값에 1을 추가해야 합니다. 🎜

🎜이 메서드를 실행한 후 calendarProps 값은 다음과 같습니다. 🎜🎜🎜

4. 달력 속성을 기반으로 달력 날짜 데이터 생성🎜🎜알고 있는 경우 이번 달의 1일에 해당하는 요일의 색인 값, 이번 달의 총 일수 및 이번 달의 총 일수 지난달 핵심 데이터를 수집한 후 해당 캘린더 데이터 생성을 시작할 수 있습니다. 🎜🎜아이디어는 다음과 같습니다: 🎜

🎜대부분의 경우 달의 첫날이 처음부터 시작되지 않기 때문에 이전 부분은 이전 달의 날짜입니다. 따라서 첫 번째 줄은 별도로 처리해야 합니다. 🎜🎜공개 날짜 값을 설정하고 초기 값은 1로 설정됩니다. 그런 다음 매월 1일에 해당하는 요일 색인 값부터 증가하기 시작합니다. 이번 달 전후의 날짜를 계산하는 알고리즘을 설정합니다. 🎜🎜나중에 날짜 전환 및 스타일 차별화를 용이하게 하기 위해 생성된 데이터는 날짜 유형(dateType)을 포함하는 개체로 처리되어 이번 달, 이전 달 또는 다음 달인지 나타냅니다. Month; 🎜

rrreee🎜이 시점에서 이 캘린더 구성 요소의 핵심 로직이 구현되었습니다. 보세요, 아주 간단하지 않나요? 🎜🎜다음으로, 해당 HTML 템플릿을 렌더링하고 calendarData의 데이터를 기반으로 스타일을 추가하기만 하면 됩니다. 🎜

5. 템플릿 및 스타일 부분 추가

일반적으로 달력 구성 요소는 그리드 형태의 구조를 가지므로 렌더링을 위해 테이블 ​​방식을 선택합니다. 하지만 다른 방법이 있냐고 물으신다면 플렉스 레이아웃이나 그리드 레이아웃을 사용하는 등 아직 몇 가지 방법이 있지만 이 방법을 사용하면 calendarData의 데이터 구조가 지금과 같지 않게 됩니다.

돔 구조는 아래와 같습니다.

버튼 테두리의 흐르는 효과에 대해서는 Su Su의 기사를 참조하여 만들었습니다.

Clip-path는 버튼 흐름을 구현합니다. border animationjuejin.cn/post /719877…

그런 다음 나머지 스타일 부분은 UI 디자인 도면에 따라 즉흥적으로 그리거나 그릴 수 있습니다. UI시스터즈의 절묘한 디자인 도안은 다들 경험해보셨을 거라 믿습니다(히히

구체적인 코드 부분은 글에 올리지 않겠습니다. 필요하다면 아래에서 전체 소스코드를 직접 보실 수 있습니다

gitee. com/ wushengyuan...

결론

매우 번거롭게 느껴지는 일부 구성 요소의 경우 핵심 로직이 그다지 복잡하지 않을 수도 있습니다. 때로는 코드를 한 줄씩 읽고 아이디어를 명확하게 하는 데 약간의 인내심이 필요할 수도 있습니다.

추천 학습: "vue 비디오 튜토리얼"

위 내용은 Vue 사용자 정의 달력 구성 요소를 캡슐화하는 방법에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!