Vue 日历组件
(1) 简介
该日历组件是一个应用于移动端的日历组件采用了rem(文末附有rem.js)

(2) template
<span @click="chooseYear">{{showDate.year}}
<div class="month-left" @click="prevMonth">
{{showDate.month}}月
<div class="month-right" @click="nextMonth">
<span v-if="item.canClick" @click="dealClick(item.intactDate)">{{item.dayDate}}
{{item.dayDate}}
<div class="calendar-mask" v-if="showMask" @click="closeMask" @touchmove.prevent>
<li v-for="item in showYearMonth" :class="{'active': item.activeYear}" :key="item.year" @click="dealClickYear(item)">{{item.year}}
(3) script
(4) style
(5) rem.js
;(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
console.log(docEl.style.fontSize)
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
自用,持续更新中...

浙公网安备 33010602011771号