封装就是要具有灵活性，样式自适应，调用的时候传入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 } 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>
--------------------------------------------------------------------------------------------------------------------------------------------------------
1.建一个vue文件，打出一个 < 然后按tab键 自动创建vue的模板 首先在script标签里写好name和props属性
props写成校验写法，这里我先定义了宽度w，高度h，单位rem，字体大小fontSize，字体颜色color，边框border，背景颜色background，这些都是基本的组件封装需要的props。如图：
扫描二维码关注公众号，回复：
5195259 查看本文章
这些props我都给它设置了一个默认值，当调用时不传其中的某个参数就是默认的值，传的话就是指定值；
然后定义交互的props： v-model需要的props：value v-model绑定的是显示在父组件某个容器里的值 显示的日期格式化单位format 控制显隐的点击函数fn。如图：
类型为Array或者Object的props设置默认值需要用回调函数返回。
-------------------------------------------------------------------------------------------------------------------------------------------------
2.props定义好后就开始写结构和样式，这里的样式不能写在style标签里面，需要用：style动态添加到标签上面。
先写data定义好几个基础的样式变量。如图：
接着在methods里面写两个设置宽度样式setWidth和高度样式setHeight的方法。如图：
setHeight与setWidth这两个方法的第一个参数为设置的像素大小（即设计图量的多少px就传多少，不带单位），第二个参数可选，传入true时返回一个纯数字，不传时返回一个带单位的值
这里我用了三元运算符，后面将会大量用到三元运算符（有嵌套用法）。this.w与this.fontSize即传入的props。
this.w*(w/257)与this.fontSize*(h/14) 这里的w / 257就是你要设置的宽相对于设计图的最外层大盒子的宽的占比。h/14就是设置的高相对于字体大小的占比。
这里不推荐用h / this.h 因为这里的组件高度需要自适应。
-------------------------------------------------------------------------------------------------------------------------------
3.template里面创建好基本结构 。如图：
接着在created里面初始化样式 。如图：
上面的代码可能就是最后的this.selectStyle有点不好理解
这里的cw就是用按钮的实际的宽度去减选中时的高度。因为选中的时候宽度需要写成和高度一样的才能成为一个圆形。
这时就需要设置选中的按钮左右的margin。因为cw 有可能是奇数，所以除以2的时候再四舍五入就不是平均值了。
所以margin-right就是用cw减去margin-left的值，避免盒子被挤到下一行。
-------------------------------------------------------------------------------------------------------
4.逻辑部分=>创建结构里需要显示的数据。如图：
在template里将数据渲染到标签上。如图：
接着在methods里面写一个初始化方法 init :
这个方法用来渲染页面的日期数据，这里需要写一个获取指定年份和月份所对应的天数。
在methods里面再定义一个方法getMonthDayCount。如图：
渲染日历init方法，如图：
init方法写好后在created钩子函数里最后调用一下 this.init()
调用这个方法写完后页面的初始数据就算完成了，这时页面还是有问题的，有许多地方部分样式需要重写，
所以下面就是如何重写部分样式。如图：
------------------------------------------------------------------------未完待续------------------------------------------------------------------