vue实现一个炫酷的日历组件(2)

// 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, 'https://www.jb51.net/') : 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 v-click-outside="spaceClick"> .... </div>

这里需要使用 fastclick 库来消除解决移动端点击事件300ms延时

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

mock数据

// 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数据才可以全局拦截请求 }

坑点

在微信内置浏览器中，ios的日期格式跟安卓的日期格式分别是：YY/MM/DD和YY-MM-DD。这里需要对微信内置浏览器User Agent进行判断。

获取服务器时间的异步问题，把获取到的服务器时间保存在vuex里面，在calendar.vue页面监听当前日期的变化。及时将日历数据计算渲染出来。

推荐：

感兴趣的朋友可以关注小编的微信公众号【码农那点事儿】，更多网页制作特效源码及学习干货哦！！！

总结