@mediascreenand(max-width:500px){.header{height:calc(100vw*9/16);}}.header{显示：flex;弹性方向：列；.header-title{行黑右：5rem；}.btn-list{显示：flex；填充：1rem；边距顶部：自动；.btn-list-left{填充：0.5rem;宽度：40%；显示：弹性；.select-month{flex:2;}.btn-pre{flex:1;背景色：#0080FF；}.btn-next{flex:1;背景色：#0080FF；}}.btn-today{填充：0.5rem；左边距：自动；右边距：1rem；背景色：#076678；白颜色;}}}.calendar-content{显示：flex；弹性包装：包装；宽度：100%；.selected{背景颜色：#007FAA；}.grid{宽度：calc((100%-9px)/7);高度：3rem；行高：3rem；左边框：#005599实心1px；底部边框：#005599实心1px；}.grid-week{border-top:#005599solid1px;}.grid-week:nth-child(7){边界对吧：#005599solid1px；}.grid-day:nth-child(14){border-right:#005599solid1px;}.grid-day:nth-child(21){border-right:#005599solid1px;}.grid-day:nth-child(28){border-right:#005599solid1px;}.grid-day:nth-child(35){border-right:#005599solid1px;}.grid-day:nth-child(42){border-right:#005599solid1px;}}}}自适应日历组件开发效果图PC端移动端预览预览地址：预览地址1，传入参数1.1，置顶背景图如上图红圈区域所示，背景照片的参数在组件参数中设置DefinebgSrc:{type:String,default:'https://images8.alphacoders.com/992/992329.jpg'}1.2。日历的标题设置为上图中圈出的文字，定义在组件参数中。title:{type:String,default:'Calendar'}2.回调方法2.1。使用this.$emit()在选定的日期将数据传输到父组件。在组件日期点击事件中执行。clickDay(day){this.selectDay=daythis.$emit('selectDay',day)}2.2。要切换月份，请使用this.$emit()将数据传输到父组件。在组件日期点击事件中执行。//上个月toPreMonth(){letyear=this.selectMonth.split('-')[0]letmonth=this.selectMonth.split('-')[1]month=parseInt(month)-1if(month===0){month=12year=parseInt(year)-1}this.days=this.fillDays(year,month)this.$emit('changeMonth',year+'-'+this.zero(month))},//下个月toNextMonth(){letyear=this.selectMonth.split('-')[0]letmonth=this.selectMonth.split('-')[1]month=parseInt(month)+1if(month===13){month=1year=parseInt(year)+1}this.days=this.fillDays(year,month)this.$emit('changeMonth',year+'-'+this.zero(month))}3.组件js模块开发流程3.1。3.1.1.当月天数的确认。判断年份/***判断年份*@param{string}year要判断的年份*@return{Boolean}*/functionisLeap(year){if((year%4==0&&year%100!=0)||(年%400==0)){返回真;}返回假；}3.1.2。获取当月的天数/***获取当月的天数*@param{string}yearyear*@param{string}monthmonth*@return{string}*/functiongetMonthDays(year,month){month=parseInt(month)-1;if(month<0||month>11)return''letmonths=[31,28,31,30,31,30,31,31,30,31,30,31];如果（isLeap（年））{月[1]=29；}returnmonths[month];}3.1.3、getweek/***getweek*@param{string}date需要得到星期几*@return{string}*/functiongetWeek(date){letweeks=newArray("day","one","two","three","four","five","six");让邮票=新日期（日期）；console.log(weeks[Stamp.getDay()])}3.1.4、添加全天数/***补零*@param{string}str需要补零的数字*@return{string}*/functionzero(str){返回str>9?str:'0'+str;}/***要填充的完整天数*@param{string}yearyear*@param{string}monthmonth*@return{string}*/functionfillDays(year,month){constmonths=getMonthDays(year,month);conststartWeek=getWeek(年+'-'+月+'-'+'01');constendWeek=getWeek(年+'-'+月+'-'+月);年=parseInt(年);月=parseInt(月);让预叶ar=年份；让preMonth=月-1;如果（preMonth==0）{preMonth=12;前一年=年-1;}constpreMonths=getMonthDays(preYear,preMonth);让下一年=年；让nextMonth=月+1;如果（下一个月==13）{下一个月=1；下一年=年+1;}constnextMonths=getMonthDays(nextYear,nextMonth);让天=[];for(leti=0;i<
