Vue пишет классный компонент календаря

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

проект:

公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 Как показано на рисунке: 假设今天为2018-09-02

日历

90 дней назад:

日历

через 90 дней;

日历

спрос на продукт:

  • Отображает 90 дней до и после текущей даты (время сервера), всего 181 день.
  • Календарь можно смахивать влево и вправо, чтобы переключать месяцы.
  • Если текущий месяц не находится в диапазоне 181 дня, он должен быть выделен серым цветом и не может быть нажат.
  • Щелкните за пределами узла, к которому привязан календарь, чтобы закрыть всплывающее окно.

Вовлеченный контент:

  1. Получить время сервера, отобразить данные календаря
  2. vue-touch прослушивает события жестов
  3. ios совместимая с датой обработка
  4. пользовательская директива clickOutSide
  5. фиктивные фиктивные данные

Разработка:

СсылкаРазработка компонента календаря на основе Vue — NuggetsМетод расчета дня месяца календарного года. Основная идея: Предполагая, что текущий месяц февраль, по дням недели 1 февраля и марта выложить февраль. (Если вам нужно отобразить даты января и марта в феврале, вам также нужно знать, сколько дней в январе)

В разработке проекта, чтобы развиваться параллельно с коллегами в фоновом режиме. Проект использует фиктивные фиктивные данные для перехвата интерфейса.

  • отображение календаря
// calendar.vue
<template>
  <div class="cp-calendar">
    <v-touch
      @swipeleft="handleNextMonth"
      @swiperight="handlePreMonth"
      class="calendar">
      
      <div class="calendar-main" >
        <span class="item-con header-item"
              v-for="(item, index) in calendarHeader"
              :key="index">{{item}}</span>

        <div :class="`item-con ${todayStyle(item.content) && 'item-con-today'} ${item.type === 'disabled' && 'disableStyle'}`"
             :style="{opacity: isChangeMonth ? 0 : 1}"
             @click.stop="handleDayClick(item)"
             v-for="(item, index) in getMonthDays(selectedYear, selectedMonth)"
             :key="item.type + item.content + `${index}`">
          <span
            :class="`main-content ${selectedDateStyle(item.content) && 'selectedColor'}`">
            {{setContent(item.content)}}</span>
          <span :class="`${selectedDateStyle(item.content) && 'item-con-point'}`" ></span>
        </div>
      </div>
      
    </v-touch>
  </div>
</template>
  • Данные инициализации Начальная обработка данных для серверного времени
// calendar.vue
// 设置初始数据
      initData () {
        this.today = this.currentDate || getDateStr(0) // 如果没有服务器时间，拿本地时间
        this.prevDate = getDateStr(-90, this.currentDate)
        this.nextDate = getDateStr(90, this.currentDate)
        // 是否有手动选中的日期
        let selectedFullDate = this.storeSelectedFullDate
        if (!this.storeSelectedFullDate) {
          selectedFullDate = this.currentDate || getDateStr(0) // 如果没有服务器时间，拿本地时间
        }
        this.selectedYear = Number(selectedFullDate.split('-')[0])
        this.selectedMonth = Number(selectedFullDate.split('-')[1]) - 1
        this.selectedDate = Number(selectedFullDate.split('-')[2])
        this.selectedFullDate = `${this.selectedYear}-${this.selectedMonth + 1}-${this.selectedDate}`
      },
      / 渲染日期
      getMonthDays(year, month) {
        // 定义每个月的天数，如果是闰年第二月改为29天
        let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
          daysInMonth[1] = 29;
        }
        // 当月第一天为周几
        let targetDay = new Date(year, month, 1).getDay();
        let calendarDateList = [];
        let preNum = targetDay;
        let nextNum = 0;
        if (targetDay > 0) {
          // 当前月份1号前的自然周剩余日期，置空
          for (let i = 0; i < preNum; i++) {
            let obj = {
              type: 'pre',
              content: ''
            };
            calendarDateList.push(obj);
          }
        }
        // 判断当前年月份
        let formatMonth = month + 1 >= 10 ? month + 1 : '0' + (month + 1)
        this.prevYearMonthBoolean = (`${year}-${formatMonth}` === this.prevYearMonth)
        this.nextYearMonthBoolean = (`${year}-${formatMonth}` === this.nextYearMonth)
        for (let i = 0; i < daysInMonth[month]; i++) {
          // 正常显示的日期
          let obj = {
            type: 'normal',
            content: i + 1
          };
          // 判断是否为最往前或者最往后的月份，筛选出不可点击的日期
          if (this.prevYearMonthBoolean) {
            let prevDay  = this.prevDate.split('-')[2]
            if (i + 1 < prevDay) {
              obj.type = 'disabled'
            }
          } else if (this.nextYearMonthBoolean) {
            let nextDay  = this.nextDate.split('-')[2]
            if (i + 1 > nextDay) {
              obj.type = 'disabled'
            }
          }
          calendarDateList.push(obj);
        }

        nextNum = 6 - new Date(year, month + 1, 0).getDay()

        // 当前月份最后一天的自然周剩余日期，置空
        for (let i = 0; i < nextNum; i++) {
          let obj = {
            type: 'next',
            content: ''
          };
          calendarDateList.push(obj);
        }
        return calendarDateList;
      },
      // 设置日期
      setContent (content) {
        if (!content) return ''
        return `${this.selectedYear}-${this.tf(this.selectedMonth + 1)}-${this.tf(content)}` === this.today ? '今天' : content
      },
      // '今天'样式开关
      todayStyle (content) {
        if (!content) return false
        // Toast(`${this.selectedYear}-${this.tf(this.selectedMonth + 1)}-${this.tf(content)}`)
        return `${this.selectedYear}-${this.tf(this.selectedMonth + 1)}-${this.tf(content)}` === this.today
      },
      // 当前选中的日期样式开关
      selectedDateStyle (content) {
        if (!content) return false
        return `${this.selectedYear}-${this.selectedMonth + 1}-${content}` === this.selectedFullDate
      },

// src/config/utils.js
// 公共方法
/**
 * @param  AddDayCount 必传   今天前后N天的日期
 * @param  dateStr：   非必传  获取传入日期前后N天的日期：'2018-01-20'
 * @param  type        非必传  'lhRili'类型格式如'2018-7-3'
 * @return 返回日期'2018/01/20'
 */
export const getDateStr = (AddDayCount, dateStr, type) => {
  // console.log('getDateStr', AddDayCount, dateStr, type)
  var dd
  if (!dateStr) {
    dd = new Date()
  } else {
    // 判断是否为IOS
    const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

    let formatDateStr = isIOS ? dateStr.replace(/-/g, '/') : dateStr
    dd = new Date((formatDateStr.length < 12) ? formatDateStr + ' 00:00:00' : formatDateStr)
  }
  dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

  let y = dd.getFullYear()
  let m
  let d
  if (type === 'lhRili') {
    m = dd.getMonth() + 1
    d = dd.getDate()
  } else {
    let currentMon = (dd.getMonth() + 1)
    let getDate = dd.getDate()
    m = currentMon < 10 ? '0' + currentMon : currentMon // 获取当前月份的日期，不足10补0
    d = getDate < 10 ? '0' + getDate : getDate // 获取当前几号，不足10补0
  }

  let time = y + '-' + m + '-' + d
  return time
}
  • Левое и правое касание и события скольжения Определите, может ли месяц продолжать скользить
// calendar.vue
// 上一个月
      handlePreMonth() {
        if (this.prevYearMonthBoolean) {
          return
        }
        if (this.selectedMonth === 0) {
          this.selectedYear = this.selectedYear - 1
          this.selectedMonth = 11
          this.selectedDate = 1
        } else {
          this.selectedMonth = this.selectedMonth - 1
          this.selectedDate = 1
        }
      },
      // 下一个月
      handleNextMonth() {
        if (this.nextYearMonthBoolean) {
          return
        }
        if (this.selectedMonth === 11) {
          this.selectedYear = this.selectedYear + 1
          this.selectedMonth = 0
          this.selectedDate = 1
        } else {
          this.selectedMonth = this.selectedMonth + 1
          this.selectedDate = 1
        }
      },
  • vuex хранит данные
// src/store/schedule.js
const schedule = {
  state: {
    selectedDate: '', // 手动点击选中的日期
    currentDate: '' // 服务器当前日期
  },

  getters: {
    getSelectedDate: state => state.selectedDate,
    getCurrentDate: state => state.currentDate
  },

  mutations: {
    SET_SELECTED_DATE: (state, data) => {
      state.selectedDate = data
    },
    SET_CURRENT_DATE: (state, data) => {
      state.currentDate = data
    }
  },

  actions: {
    setSelectedDate: ({ commit }, data) => commit('SET_SELECTED_DATE', data),
    setCurrentDate: ({ commit }, data) => commit('SET_CURRENT_DATE', data)
  }
};

export default schedule;
  • команда clickOutSide слушатель командного метода
// src/directive/click-out-side.js
export default{
  bind (el, binding, vnode) {
    function documentHandler (e) {
      if (el.contains(e.target)) {
        return false;
      }
      if (binding.expression) {
        binding.value(e);
      }
    }
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  unbind (el, binding) {
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  }
}

инструкция по регистрации

// src/directive/index.js
import clickOutSide from './click-out-side'

const install = function (Vue) {
  Vue.directive('click-outside', clickOutSide)
}

if (window.Vue) {
  window.clickOutSide = clickOutSide
  Vue.use(install); // eslint-disable-line
}

clickOutSide.install = install
export default clickOutSide


// src/main.js
import clickOutSide from '@/directive/click-out-side/index'

Vue.use(clickOutSide)

Как использовать: когда событие нужно инициировать за пределами узла, смонтируйте его на узле.

// calendar.vue
<div class="cp-calendar" v-click-outside="spaceClick">
....
</div>

Здесь нужно использоватьfastclickБиблиотека для устранения задержки в 300 мс при разрешении событий мобильных кликов.

// src/mian.js
import FastClick from 'fastclick' // 在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --> click。

FastClick.attach(document.body);
  • фиктивные данные
// src/mock/index.js
// mock数据入口
import Mock from 'mockjs'
import currentTime from './currentTime'

// 拦截接口请求
Mock.mock(/\/schedule\/getCurrentTime/, 'get', currentTime)

export default Mock


// src/mock/currentTime.js
import Mock from 'mockjs'

export default {
  getList: () => {
    return {
      'status': 'true',
      'code': '200',
      'msg': null,
      'info': {
        'currentDate': '2018-09-02'
      }
    }
  }
}


// src/main.js
// 开发环境引入mock
if (process.env.NODE_ENV === 'development') {
  require('./mock') // 需要在这里引入mock数据才可以全局拦截请求
}

яма

  • Во встроенном браузере WeChat формат даты ios и Android: ГГГГ/ММ/ДД и ГГГГ-ММ-ДД соответственно. Здесь нам нужно оценить пользовательский агент встроенного браузера WeChat.
  • Асинхронная проблема получения серверного времени, сохранение полученного серверного времени в vuex и мониторинг изменения текущей даты на странице calendar.vue. Рассчитать и визуализировать данные календаря во времени.
Категории