Вручную разработать компонент календаря

внешний интерфейс JavaScript Vue.js MVVM

предисловие

Сценарий приложения заключается в том, что в функцию календаря необходимо добавить тему ежедневных рекомендаций компании.Щелкните календарь, чтобы перейти к рекомендации дня.

Дизайн диаграммы:

Реализация календаря

Ядром реализации календаря является использование объекта Date js (среда кода проекта зависит от vue).

Первый шаг: отображение домашней страницы

Начнем с рассмотрения первой страницы нашего календаря, текущего месяца.

Чтобы отобразить наш текущий месяц, сначала нам нужны три части данных:

  • текущий год
  • текущий месяц
  • Список дат в следующем месяце

Состояние инициализации этих данных (обратите внимание, что это просто инициализация, потому что во время использования календаря они будут меняться при взаимодействии) очень легко получить, первые два данных нам нужно только передать:

this.curdate = new Date();
this.calendarMonth = this.curDate.getMonth() + 1; // 注意月份加1
this.calendarYear = this.curDate.getFullYear();

Стоит упомянуть наши данные о дате, потому что здесь задействованы 2 переменные, первая из которых состоит в том, что количество дней в каждом месяце разное. Во-вторых, 1-е число каждого месяца является днем ​​недели и не является фиксированным (и день недели будет влиять на отображение, где должно начинаться 1-е число).

Вставьте окончательный код, чтобы получить список напрямую:

/* 返回当月的日期表 */
getMonthList() {
  // new Date()中的最后一个参数为0，表示的是当月的最后一天，
  // 因此我们通过这一句获得的就是传入的年月的当月最后一天。
  let date = new Date(this.calendarYear, this.calendarMonth, 0);
  // 获得当月的最后一天的日期号，就知道了当月有多少天
  this.days = date.getDate();
  // setDate(1)的作用是把日期变为当月的第一天
  date.setDate(1);
  // 在通过getDay()，就能知道当月的第一天是星期几
  let day = date.getDay();
  // 获得1号是星期几后，在日历上做一个偏移，这里我采用的是补0
  let delay = day - 1;
  // 因为星期天在getDay的返回中是0，固特殊处理
  if (day == 0) {
  	delay = 6;
  }
  let list = [];
  for (let i = 0; i < this.days + delay; i++) {
    if (i < delay) {
      list.push(0);
    } else {
      list.push(i - delay + 1)
    }
  }
  return list;
},
// 通过这个函数我们就获得了当月的列表，格式类似于[0,0,0,1,2,3...31]

Шаг 2. Реагируйте на изменения

Изменения в основном делятся на два аспекта: щелкните стрелку влево и вправо, чтобы изменить месяц, и щелкните конкретную дату.

Изменить месяц:

Главное, что мы должны сделать при изменении месяца, это изменить переменную, которую мы используем для записи времени (преимущество использования инфраструктуры mvvm заключается в том, что нам не нужно сосредотачиваться на изменениях уровня представления, просто сосредоточьтесь на наших переменных ):

changeMonth(flag) {
  // flag 记录左右滑动，对应到月份就是加1和减1
  this.curDate.setMonth(this.calendarMonth - 1 + flag);
  // setNowDate() 函数里面包括了我们每次改变日期时所需要做的工作，比如刷新月份列表（即重新调用getMonthList函数等其他一些功能）
  //如果我们要把日历做成一个组件，那么我们的函数中肯定需要触发一个事件钩子以反馈给外部例如：$emit('monthChange')
  this.setNowDate();
},
Дата изменения:
changeDay(day, el) {
  // 改变我的当前显示日期
  this.curDate.setDate(day);
  // clickedMonth是用来记录我当前点击的月份，这个变量只随点击改变，而不随页面翻动改变，主要是用来判断当前日期的样式用的。
  this.clickedMonth = this.calendarMonth;
  this.clickedYear = this.calendarYear;
  // 获取当前日历的推荐数据（具体逻辑不赘述，这里可以进行自己需要的操作）
  this.getData(new Date(this.calendarYear, this.calendarMonth - 1, day), true)
  this.setNowDate();
},

При щелчке по дате наш стиль изменяется соответствующим образом:

// 计算样式的函数
calDayCls(day) {
  let cls = "calendar-li";
  /* 查看当前 */
  if (day == this.calendarDay && this.calendarYear == this.clickedYear && this.calendarMonth == this.clickedMonth) {
    cls += ' calendar-li-active';
  }
  return cls
}

На этом основные функции нашего календаря завершены. Основные функции заключаются в следующем:

setNowDate // 改变控制当前日历显示的变量
changeMonth // 改变月份
getMonthList // 获取月份日期表
changeDay // 改变日期
calDayCls // 计算当前日期的样式

С этими основными частями в основном реализуются основные функции календаря, а затем к нему можно добавить больше пользовательских функций, потому что многие из них включают персонализацию в моих собственных проектах и ​​не имеют слишком большой справочной ценности. в коде.

Категории