实现一个日期组件，如图：

组件。射流研究…代码如下：

Vue.component('sc-calendar '，{ template : ' div class=' scCalendar ' ' ' div class=' calendar _ header ' ' ' div class=' prev ' @ click=' prev month '/div ' ' span class=' text _ year ' { current yar } }年/span"span class="text _ month"{当月} "月/span“”div class=“next ”@单击='下个月'/div ' '/div ' ' class=' calendar _ content ' ' ' ul class=' week ' ' ' Li v-for='周中的项目{ { item。text } }/Li ' '/ul ' ' ul class=' day ' ' ' Li v-for=' day list ' : class=' {右边距0: item。右边距0 } ' { { item。text } }/Li ' '/ul ' '/div ' '/div '，数据33366日', '一', '二', '三', '四', '五', '六]，dayList:[]，currentYear: ' '，currentMonth: '' }，创建d :函数(){ var Date=new Date这个。当前日期。getfull year()；这个。当月=日期。get month()1；这个。卡尔戴(这个。现在的yar，这个。当月)；}，methods:{ //计算指定月份的天数calDay:function(年、月){ var HiTH=new Date()；//设置整年（年、月、日)方法用于设置年份，返回调整过的日期的毫秒表示。HuIt。设置整年(年，月-1,1);亨特。setdate(1)；//设置一个月中的第一天var oNow=HitHu。GetDay()；//当前月的第一天是星期几var DayNum=0；//指定月份的天数如果（月==1 ||月==3 ||月==5 ||月==7 ||月==8 ||月==10 ||月==12){ dayNum=31；} else if(month==4 | | month==6 | | month==9 | | month==11){ dayNum=30；} else if(month==2 this。Isla year(year)){ dayNum=29；} else { dayNum=28 } var SumDayLiNum=0；//总共的格子数var lastNum=(Daynum-(7-Onow))% 7；//最后剩余的数lastNum=lastNum==0？0:7;SumDayLiNum=7 parsent((dayNum-(7-oNow))/7)* 7 lastNum；this.showDayList(dayNum，SumDayLiNum，Onow)；}, //判断是否是闰年函数（年){ if(year%4==0year0！=0){返回true } else { if(year @ 0==0){ return true；} else { return false} } }，//显示当前日历内容showdaylist :函数(dayNum，SumDayLiNum，oNow){ this。day list=[]；var rows=parsent(SumDayLiNum/7)；var cols=7；for(var I=0；irowsI){ for(var j=0；jcolsj){ if(j==cols-1){ this。每日清单。推送({ text : " "，margin right 0: true })} else { this。每日清单。push({ text : " "，margin right 0: false })} } for(var z=1；z=dayNumz ){ this.dayList[oNow].text=z；oNow} }，previmonth : function(){ if(this。当月==1){这个。当前yar=这个。当前yar-1；this.currentMonth=12} else { this。当月=本月。当前月份-1；}这个。卡尔戴(这个。现在的yar，这个。当月)；}，下月：函数(){ if(this。当月==12){这个。当前yar=这个。当前yar 1；这个。当月=1；} else { this。当月=本月。当前月份1；}这个。卡尔戴(这个。现在的yar，这个。当月)；} }});ccal.css代码：

html { font-family: '微软雅黑；}body、div、span、img、ul、li、p { margin 3360 0；padd : 0；}ul、李{列表式：无；}.公共prev { width : 0。46666677雷姆；高度： 0.93333333毫米；color: # ffffff绝对位置：显示器：内联块；}.普通年份高度： 1.6雷姆；font-size : 1 remcolor: # ffffff绝对位置：}.scCalendar { width: 25rem高度21.666666667雷姆；背景技术： # 005498;背景尺寸： 100%;}.scCalendar .calendar _ header { height : 2.9333333333 rem；宽度： 100%;相对位置：线高：2.93333333333}.scCalendar .日历标题上一个宽度高度： 0.93333333毫米；color: # ffffff绝对位置：显示器：内联块；向左；向左}.scCalendar .日历标题。下一个高度： 0.93333333毫米；color: # ffffff绝对位置：显示器：内联块；权利；权利}.scCalendar .日历标题text _ year { width : 5.46666667 rem；高度： 1.6雷姆；font-size : 1 remcolor: # ffffff绝对位置：向左；向左}.scCalendar .日历标题text _ month { width : 5.46666667 rem；高度： 1.6雷姆；font-size : 1 remcolor: # ffffff绝对位置：left: 13.1rem}。scCalendar .calendar _ content { padd : 0 1 rem；}.scCalendar .calendar _ content Li { width : 2 rem；高度： 2毫米线高： 2雷姆；保证金权利： 1.5雷姆；文本对齐：中心；保证金-底部： 0.66666667雷姆；向左浮动：颜色：白色；font-size : 0.933333333 rem}.scCalendar .日历内容。周li:nth第(7)类{右边距： 0；}.scCalendar .日历内容一天。右边距0 {右边距-: 0；}index.html代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title link rel='样式表href=' ./ccal。CSS ' rel='外部无跟随'脚本变化像素比=1/窗口。devicepixel比率；//像素比var html=文档。文档元素；文件。write(' meta name=' viewport ' content=' width=设备-宽度，user-scalable=no，初始比例='像素比率'，最小比例='像素比率'，最大比例=' pix比率' ')；html。风格。font size=html.clientWidth/25 ' px '；/script script src=' http :https://cdn。jsdeliver。net/NPM/[电子邮件保护]/dist/vue。js '/script script src=' http :/组件。js '/script/head dydiv id=' app ' div class=' calendar ' sc-calendar/sc-calendar/div/div/body script var VM=new Vue({ El : ' # app ' })/script/html总结

以上所述是小编给大家介绍的某视频剪辑软件实现自定义日期组件功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！