Vue文件封装日历组件

  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                     }    
500                     if(num==3){
501                         if(this.curshowsecindex<this.secarr.length-3){
502                             this.curshowsecindex += 1;
503                         }
504                     }    
505                 }
506                 if(evt.wheeldelta<0){
507                     if(num==1){
508                         if(this.curshowhourindex>-2){
509                             this.curshowhourindex -= 1;
510                         }
511                     }    
512                     if(num==2){
513                         if(this.curshowminindex>-2){
514                             this.curshowminindex -= 1;
515                         }
516                     }    
517                     if(num==3){
518                         if(this.curshowsecindex>-2){
519                             this.curshowsecindex -= 1;
520                         }
521                     }
522                 }
523             }else if(evt.detail){
524                 if(evt.detail>0){
525                     if(num==1){
526                         if(this.curshowhourindex<this.hourarr.length-3){
527                             this.curshowhourindex += 1;
528                         }
529                     }
530                     if(num==2){
531                         if(this.curshowminindex<this.minarr.length-3){
532                             this.curshowminindex += 1;
533                         }
534                     }    
535                     if(num==3){
536                         if(this.curshowsecindex<this.secarr.length-3){
537                             this.curshowsecindex += 1;
538                         }
539                     }
540                 }
541                 if(evt.detail<0){
542                     if(num==1){
543                         if(this.curshowhourindex>-2){
544                             this.curshowhourindex -= 1;
545                         }
546                     }
547                     if(num==2){
548                         if(this.curshowminindex>-2){
549                             this.curshowminindex -= 1;
550                         }
551                     }    
552                     if(num==3){
553                         if(this.curshowsecindex>-2){
554                             this.curshowsecindex -= 1;
555                         }
556                     }
557                 }
558             }
559         },
560         settimeipt(flag){
561             this.timeboxshow = true
562             if(flag){
563                 var newdatetime = new date()
564                 this.curshowhourindex = newdatetime.gethours()-2
565                 this.curshowminindex = newdatetime.getminutes()-2
566                 this.curshowsecindex = newdatetime.getseconds()-2
567             }
568             this.curclickhour = this.hourarr[this.curshowhourindex*1+2]
569             this.curclickmin = this.minarr[this.curshowminindex*1+2]
570             this.curclicksec = this.secarr[this.curshowsecindex*1+2]
571             this.curipttime=this.curclickhour+this.format[2]+this.curclickmin+this.format[2]+this.curclicksec                    
572         },
573         emitdate(){
574             if(this.curiptdate&&this.curipttime){
575                 var valuefb = this.curiptdate+this.format[1]+this.curipttime
576                 this.fn(false)
577                 this.$emit('input',valuefb)
578             }
579         }
580     },
581     watch:{
582         curshowhourindex(newval,oldval){
583             this.settimeipt()
584         },
585         curshowminindex(newval,oldval){
586             this.settimeipt()
587         },
588         curshowsecindex(newval,oldval){
589             this.settimeipt()
590         },
591     }
592 };
593 </script>
594 
595 <style scoped>
596 @import 'https://at.alicdn.com/t/font_1043142_ucomoekqib.css';
597 span {
598     display: inline-block;
599 }
600 .clear-fix:after{
601     content:'.';
602     clear:both;
603     display:block;
604     height:0;
605     overflow:hidden;
606     visibility:hidden;
607 }
608 div{
609     -moz-user-select: none; 
610     -o-user-select:none; 
611     -khtml-user-select:none; 
612     -webkit-user-select:none; 
613     -ms-user-select:none; 
614     user-select:none;
615 }
616 h1{
617     flex-direction: column;
618     justify-content: flex-end
619 }
620 </style>