Vue文件封裝日曆組件

封裝就是要具有靈活性，樣式自適應，調用的時候傳入props就可以變成自己想要的樣式。

效果展示網址：https://1963331542.github.io/

源代碼：

  1 <template>
  2     <div :style="mainBoxStyle">
  3         <div :style="topLineStyle">
  4             <div @click="timeBoxShow=false;setNowTime(true)"
  5              :style="[iptStyle,{float:'left'}]">{{curIptDate}}</div>
  6             <div @click="timeBoxShow=true;setTimeIpt(true)"
  7              :style="[iptStyle,{float:'right'}]">{{curIptTime}}</div>
  8         </div>
  9         <div :style="timeBoxStyle" v-show="timeBoxShow">
 10             <div :style="[timeAListStyle,
 11             {paddingLeft:setWidth(12),width:setWidth(70)}]"
 12              @mousewheel.stop="setIndex($event,1)"
 13               v-on:DOMMouseScroll.stop="setIndex($event,1)">
 14                 <div :style="[{zIndex:99,width:'100%',
 15                 height:setHeight(30),position:'absolute',
 16                 top:setHeight(60),left:setWidth(12),borderBottom:border,
 17                 borderTop:border}]"></div>
 18                 <div v-for="(item,i) in hourArr" 
 19                 @click="curShowHourIndex=(i-2)" 
 20                 :style="[timeOneStyle,i==0?
 21                 {marginTop:setHeight((i-curShowHourIndex)*30),
 22                 transition:'margin-top 0.2s'}:{},(i-curShowHourIndex)==2?
 23                 {display:'flex',alignItems:'center'}:{},
 24                 (i-curShowHourIndex)==5||(i-curShowHourIndex)==-1?
 25                 {color:'rgba(0,0,0,0)'}:{}]" :key="i">{{item}}</div>
 26             </div>
 27             <div :style="timeAListStyle" 
 28             @mousewheel.stop="setIndex($event,2)" 
 29             v-on:DOMMouseScroll.stop="setIndex($event,2)">
 30                 <div :style="[{zIndex:99,width:'100%',height:setHeight(30),
 31                 position:'absolute',top:setHeight(60),left:0,
 32                 borderBottom:border,borderTop:border}]"></div>
 33                 <div v-for="(item,i) in minArr" 
 34                 @click="curShowMinIndex=(i-2)" 
 35                 :style="[timeOneStyle,i==0?
 36                 {marginTop:setHeight((i-curShowMinIndex)*30),transition:'margin-top 0.2s'}:{},
 37                 (i-curShowMinIndex)==2?{display:'flex',alignItems:'center'}:{},
 38                 (i-curShowMinIndex)==5||(i-curShowMinIndex)==-1?{color:'rgba(0,0,0,0)'}:{}]"
 39                  :key="i">{{item}}</div>
 40             </div>
 41             <div @mousewheel.stop="setIndex($event,3)" 
 42             v-on:DOMMouseScroll.stop="setIndex($event,3)" 
 43             :style="[timeAListStyle,{width:setWidth(30),
 44             paddingRight:setWidth(12)}]">
 45                 <div :style="[{zIndex:99,width:setWidth(30),paddingRight:setWidth(12),
 46                 height:setHeight(30),position:'absolute',top:setHeight(60),left:0,
 47                 borderBottom:border,borderTop:border}]"></div>
 48                 <div v-for="(item,i) in secArr" @click="curShowSecIndex=(i-2)" 
 49                 :style="[timeOneStyle,i==0?{marginTop:setHeight((i-curShowSecIndex)*30),
 50                 transition:'margin-top 0.2s'}:{},
 51                 (i-curShowSecIndex)==2?{display:'flex',alignItems:'center'}:{},
 52                 (i-curShowSecIndex)==5||(i-curShowSecIndex)==-1?{color:'rgba(0,0,0,0)'}:{}]" 
 53                 :key="i">{{item}}</div>
 54             </div>
 55             <div :style="{height:setHeight(33),float:'left',width:'100%'}">
 56                 <div @click="timeBoxShow=false" :style="[bottomTimeBtnStyle,{color:'#1e90ff'}]">確認</div>
 57                 <div @click="timeBoxShow=false;curIptTime=''" :style="bottomTimeBtnStyle">取消</div>
 58             </div>
 59         </div>
 60         <div :style="[onelineStyle,{height:setHeight(37)}]">
 61             <div :style="[
 62                     oneBtnStyle,
 63                     i<2?{float:'left'}:{float:'right'},
 64                     {
 65                         height:setHeight(34)
 66                     }
 67                 ]"
 68                 v-for="(item,i) in [0,1,2,3]"
 69                 :key="i">
 70                 <div
 71                     :style="[
 72                         sanjiaoStyle,
 73                         i<2?{float:'left'}:
 74                         {float:'right'}
 75                     ]"
 76                     :class="{'iconfont':true,'icon-zuoshuangjiantou':i==0,
 77                     'icon-icon-copy':i==1,'icon-icon':i==3,'icon-zuoshuangjiantou-copy':i==2}"
 78                     @click="i==0?setDate(curYear-1,curMonth):
 79                     i==1?setDate(curYear,curMonth-1):
 80                     i==3?setDate(curYear,curMonth+1):setDate(curYear+1,curMonth)"
 81                 ></div>
 82             </div>
 83             <div :style="titleStyle">
 84                 <span>{{curYear}}</span>年
 85                 <span>{{curMonth}}</span>月
 86             </div>
 87         </div>
 88         <div :style="[onelineStyle,{height:setHeight(34)}]">
 89             <div v-for="(item,j) in [0,1,2,3,4,5,6]" :key="j" 
 90             :style="[oneBtnStyle,{height:setHeight(34),fontSize:setHeight(16)},
 91             j==0?{clear:'both'}:{}]">{{weekList[j]}}</div>
 92         </div>
 93         <div @mouseleave="curEnterDay=0" :style="[onelineStyle,{height:setHeight(30*arr.length/7)}]">
 94             <div @mouseenter="i>=arr.indexOf(1)&&i<arr.lastIndexOf(1)?curEnterDay=item:''" 
 95             @click="i>=arr.indexOf(1)&&i<arr.lastIndexOf(1)
 96             ?clickFn(item):i<arr.indexOf(1)
 97             ?switchMonthClick('-1',item):i>=arr.lastIndexOf(1)
 98             ?switchMonthClick('+1',item):()=>{}" 
 99             :style="[
100                 oneBtnStyle,
101                 {color:'#999999'},
102                 i>=arr.indexOf(1)&&i<arr.lastIndexOf(1)?
103                 (item==curClickDay&&curMonth==curClickMonth&&curYear==curClickYear)?
104                 selectStyle:
105                 (item==curClickDay+1&&curMonth==curClickMonth&&curYear==curClickYear&&(i+1)%7==1)
106                 ?{color:'#333333',clear:'both'}:
107                 curEnterDay==item||(demoDate.getFullYear()==curYear
108                 &&demoDate.getMonth()==curMonth-1
109                 &&demoDate.getDate()==item)?
110                 {color:'#1e90ff'}:{color:'#333333'}
111                 :{},
112             ]" 
113             
114             v-for="(item,i) in arr" :key="i">{{item}}</div>
115         </div>
116         <div :style="[onelineStyle,{padding:0,paddingTop:setHeight(14),height:setHeight(54)}]">
117             <div :style="bottomLineStyle">
118                 <div @click="emitDate()" :style="bottomBtnStyle">確定</div>
119                 <div @click="setNowTime()" :style="[bottomBtnStyle,{border:'none',color:'#1e90ff'}]">此刻</div>
120             </div>
121         </div>
122     </div>
123 </template>
124 
125 <script>
126 export default {
127     name: "calendar",
128     data() {
129         return {
130             mainBoxStyle: {},
131             sanjiaoStyle: {},
132             oneBtnStyle: {},
133             onelineStyle: {},
134             titleStyle: {},
135             topLineStyle:{},
136             bottomLineStyle:{},
137             bottomBtnStyle:{},
138             selectStyle:{},
139             timeBoxStyle:{},
140             bottomTimeBtnStyle:{},
141             iptStyle:{},
142             timeAListStyle:{},
143             curYear: 0,
144             curMonth: 0,
145             curFirstWeek: "",
146             weekList: ["日", "一", "二", "三", "四", "五", "六"],
147             dateNumList: [],
148             arr: [],
149             curDate: {},
150             curIptDate:'',
151             curIptTime:'',
152             curEnterDay:0,
153             curClickDay:0,
154             curClickMonth:0,
155             curClickYear:0,
156             curClickHour:'00',
157             curClickMin:'00',
158             curClickSec:'00',
159             demoDate:{},
160             hourArr:[],
161             minArr:[],
162             secArr:[],
163             timeOneStyle:{},
164             curShowHourIndex:0,
165             curShowMinIndex:0,
166             curShowSecIndex:0,
167             timeBoxShow:false,
168         };
169     },
170     created() {
171         for(var i=0;i<60;i++){
172             if(i<24){
173                 i<10?this.hourArr.push('0'+i):this.hourArr.push(i+'')
174             }
175             i<10?this.minArr.push('0'+i):this.minArr.push(i+'')
176             i<10?this.secArr.push('0'+i):this.secArr.push(i+'')
177         }
178         this.curDate = new Date()
179         if(this.value){
180             this.setDate(
181                 this.value.slice(0,4),
182                 this.value.slice(5,7),
183                 this.value.slice(this.value.lastIndexOf(this.format[1])+1,this.value.lastIndexOf(this.format[1])+3),
184                 this.value.slice(this.value.lastIndexOf(this.format[1])+4,this.value.lastIndexOf(this.format[1])+6),
185                 this.value.slice(this.value.lastIndexOf(this.format[1])+7,this.value.lastIndexOf(this.format[1])+9)
186             )
187             this.clickFn(this.value.slice(8,10)*1)
188         }
189         var cw = (this.setWidth(33,true)-this.setHeight(28,true)).toFixed(2)
190         var dw = (cw/2).toFixed(2)
191         this.selectStyle = {
192             background:'#1e90ff',
193             width:this.setHeight(28),
194             height:this.setHeight(28),
195             margin:this.setHeight(1)+' 0',
196             marginLeft:dw+this.unit,
197             marginRight:cw-dw+this.unit,
198             float:'left',
199             color:'#fff',
200             borderRadius:'50%',
201         }
202         this.demoDate = new Date()
203         this.timeBoxStyle = {
204             width: this.setWidth(160),
205             height: this.setHeight(208),
206             background: this.background,
207             fontSize: this.fontSize + this.unit,
208             color:this.color,
209             border:this.border,
210             position:'absolute',
211             top:this.setHeight(46),
212             left:this.setWidth(130),
213             boxShadow:`0 0 ${this.setHeight(6)} rgba(0,0,0,0.3)`
214         }
215         this.timeAListStyle = {
216             width:this.setWidth(58),
217             height:this.setHeight(161),
218             borderBottom:this.border,
219             overflow:'hidden',
220             // display:'flex',
221             // flexDirection:'column',
222             float:'left',
223             position:'relative',
224             marginTop:this.setHeight(10),
225         }
226         this.timeOneStyle = {
227             width:'100%',
228             height:this.setHeight(30),
229             lineHeight:this.setHeight(30),
230             cursor:'pointer'
231         }
232         this.bottomBtnStyle = {
233             width:this.setWidth(45),
234             height:this.setHeight(23),
235             border:this.border,
236             borderRadius:this.setHeight(3),
237             textAlign:'center',
238             lineHeight:this.setHeight(21),
239             float:'right',
240             marginRight:this.setHeight(4),
241             marginTop:this.setHeight(8),
242             marginBottom:this.setHeight(8),
243             cursor: "pointer",
244         }
245         this.bottomTimeBtnStyle = {
246             width:this.setWidth(42),
247             height:this.setHeight(33),
248             textAlign:'center',
249             lineHeight:this.setHeight(33),
250             float:'right',
251             cursor: "pointer",
252         }
253         this.bottomLineStyle = {
254             width:'100%',
255             height:this.setHeight(40),
256             borderTop:this.border,
257         }
258         this.iptStyle = {
259             width:this.setWidth(116),
260             height:this.setHeight(27),
261             border:this.border,
262             borderRadius:this.setHeight(3),
263             textAlign:'center',
264             lineHeight:this.setHeight(27),
265             marginTop:this.setHeight(9),
266             cursor:'pointer'
267         }
268         this.topLineStyle = {
269             width:'100%',
270             height:this.setHeight(47),
271             borderBottom:this.border,
272             padding:'0 '+this.setWidth(7),
273         }
274         this.mainBoxStyle = {
275             width: this.w + this.unit,
276             height: this.h,
277             float:'left',
278             background: this.background,
279             fontSize: this.fontSize + this.unit,
280             color:this.color,
281             border:this.border,
282             position:'relative',
283             boxShadow:`0 0 ${this.setHeight(6)} rgba(0,0,0,0.3)`,
284         };
285         this.oneBtnStyle = {
286             width:this.setWidth(33),
287             height:this.setHeight(30),
288             fontSize: this.fontSize + this.unit,            
289             float: "left",
290             background:this.background,
291             display: "flex",
292             alignItems: "center",
293             justifyContent: "center",
294             cursor: "pointer",
295         };
296         this.sanjiaoStyle = {
297             fontSize:this.setHeight(22)
298         };
299         this.titleStyle = {
300             width:this.setWidth(96),
301             height:this.setHeight(32),
302             fontSize: this.setHeight(16),
303             lineHeight:this.setHeight(32),
304             float: "left",
305             textAlign: "center",
306             marginBottom:this.setHeight(5),
307         };
308         this.onelineStyle = {
309             width: "100%",
310             paddingLeft:this.setWidth(12),
311         };
312         this.init();
313     },
314     props: {
315         format:{
316             type:Array,
317             default:function(){
318                 return ['-',' ',':']
319             }
320         },
321         fn:{
322             type:Function,
323             required:true
324         },
325         value:{
326             type:String,
327         },
328         w: {
329             type: [Number,String],
330             default: 2.57
331         },
332         h: {
333             type: [Number,String],
334             default: 'auto'
335         },
336         unit: {
337             type: String,
338             default: "rem"
339         },
340         fontSize: {
341             type: [Number,String],
342             default: 0.14
343         },
344         color: {
345             type: String,
346             default: "#333"
347         },
348         border:{
349             type:String,
350             default:'0.01rem solid #cccccc'
351         },
352         background:{
353             type:String,
354             default:'#fff'
355         },
356     },
357     methods: {
358         setHeight(h,flag){
359             if(flag){
360                 var height = (this.unit=='rem'?(this.fontSize*(h*0.01/0.14)).toFixed(2):Math.round(this.fontSize*(h/14)))*1
361             }else{
362                 var height = (this.unit=='rem'?(this.fontSize*(h*0.01/0.14)).toFixed(2):Math.round(this.fontSize*(h/14)))+this.unit
363             }
364             return height
365         },
366         setWidth(w,flag){
367             if(flag){
368                 var Width = (this.unit=='rem'?(this.w*(w*0.01/2.57)).toFixed(2):Math.round(this.w*(w/257)))*1
369             }else{
370                 var Width = (this.unit=='rem'?(this.w*(w*0.01/2.57)).toFixed(2):Math.round(this.w*(w/257)))+this.unit
371             }
372             return Width
373         },
374         getMonthDayCount(year, month) {
375             var isLeapYear = false;
376             if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
377                 isLeapYear = true;
378             }
379             var dayCount = 0;
380             switch (month) {
381                 case 0:
382                 case 2:
383                 case 4:
384                 case 6:
385                 case 7:
386                 case 9:
387                 case 11:
388                     dayCount = 31;
389                     break;
390                 case 1:
391                     if (isLeapYear) {
392                         dayCount = 29;
393                     } else {
394                         dayCount = 28;
395                     }
396                     break;
397                 default:
398                     dayCount = 30;
399                     break;
400             }
401             return dayCount;
402         },
403         setDate(year, month,hour,min,sec) {
404             if(year){
405                 this.curDate.setFullYear(year*1);
406             }
407             if(month){
408                 this.curDate.setMonth(month-1);
409             }
410             if(hour){
411                 this.curDate.setHours(hour*1)
412             }
413             if(min){
414                 this.curDate.setMinutes(min*1)
415             }
416             if(sec){
417                 this.curDate.setSeconds(sec*1)
418             }
419             this.init();
420         },
421         init() {
422             var activeDate = new Date();
423             activeDate.setFullYear(this.curDate.getFullYear())
424             activeDate.setMonth(this.curDate.getMonth())
425             activeDate.setDate(this.curDate.getDate())
426             activeDate.setHours(this.curDate.getHours())
427             activeDate.setMinutes(this.curDate.getMinutes())
428             activeDate.setSeconds(this.curDate.getSeconds())
429             this.arr = []
430             this.curYear = activeDate.getFullYear();
431             this.curMonth = activeDate.getMonth() + 1;
432             if(this.value){
433                 this.curShowHourIndex = this.hourArr.indexOf(activeDate.getHours()<10?'0'+activeDate.getHours():''+activeDate.getHours())-2
434                 this.curShowMinIndex = this.minArr.indexOf(activeDate.getMinutes()<10?'0'+activeDate.getMinutes():''+activeDate.getMinutes())-2
435                 this.curShowSecIndex = this.secArr.indexOf(activeDate.getSeconds()<10?'0'+activeDate.getSeconds():''+activeDate.getSeconds())-2
436             }
437             var len = this.getMonthDayCount(
438                 activeDate.getFullYear(),
439                 activeDate.getMonth()
440             );
441             for (var i = 0; i < len; i++) {
442                 this.arr.push(i + 1);
443             }
444             activeDate.setDate(0);
445             var lastMonthDayCount = this.getMonthDayCount(
446                 activeDate.getFullYear(),
447                 activeDate.getMonth()
448             );
449             var weekIndex = activeDate.getDay();
450 
451             for (var i = 0; i < weekIndex + 1; i++) {
452                 this.arr.unshift(lastMonthDayCount - i);
453             }
454             var len2 = this.arr.length;
455             for (var i = 0; i < 42 - len2; i++) {
456                 this.arr.push(i + 1);
457                 if(this.arr.length%7==0){
458                     break;
459                 }
460             }
461         },
462         clickFn(item){
463             this.timeBoxShow = false
464             this.curClickDay=item;
465             this.curClickMonth=this.curMonth;
466             this.curClickYear=this.curYear;
467             this.curIptDate=this.curClickYear+this.format[0]+(this.curClickMonth<10?'0'+this.curClickMonth:this.curClickMonth)+this.format[0]+(this.curClickDay<10?'0'+this.curClickDay:this.curClickDay)
468         },
469         switchMonthClick(num,item){
470             this.setDate(this.curYear,this.curMonth*1+num*1)
471             setTimeout(() => {
472                 this.clickFn(item)
473             }, 1);
474         },
475         setNowTime(flag){
476             if(!flag){
477                 this.setTimeIpt(true)
478             }
479             var nowDate = new Date()
480             this.curClickYear=nowDate.getFullYear();
481             this.curClickMonth=nowDate.getMonth()+1;
482             this.curClickDay=nowDate.getDate();
483             this.curIptDate=this.curClickYear+this.format[0]+(this.curClickMonth<10?'0'+this.curClickMonth:this.curClickMonth)+this.format[0]+(this.curClickDay<10?'0'+this.curClickDay:this.curClickDay)
484             this.setDate(this.curClickYear,this.curClickMonth)
485         },
486         setIndex(evt,num){
487 
488             if(evt.wheelDelta){
489                 if(evt.wheelDelta>0){
490                     if(num==1){
491                         if(this.curShowHourIndex<this.hourArr.length-3){
492                             this.curShowHourIndex += 1;
493                         }
494                     }
495                     if(num==2){
496                         if(this.curShowMinIndex<this.minArr.length-3){
497                             this.curShowMinIndex += 1;
498                         }
499                     }