vue实现一个炫酷的日历组件,vue日程组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现日历组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于VUE实现日历组件，供大家参考，具体内容如下
年和月份是使用输入框来切换的，没有做成选择框，和切换月份，红色选取是选取的日期
实现思路和网上的大多数一样，首先是把月份的天数存进一个数组，
月日：[31,,31,30,31,30,31,31,30,31,30,30,31],
由于二月的天数是不确定的，所以就先设置为空
然后去求选择的月份的第一天是星期几，通过Date.getDay()函数，这个函数有一个注意事项，就是如果是星期天，他会返回0,这需要我们自己去处理一下
图中，2019年一月一号是星期二，所以前面就要给它一个空格块
下面代码中第一层循环就是在循环空格块，太空日表示需要几个空格
太空日中的项目：key=item.id/p
p v-for=(item，idx)于(月日[本。month-1] 30) @ click= setDay(idx):class= idx==active day？"活动“:”:key=“item。id“{ item } }/p
下面贴出完整代码
模板
div id=日历
div class=txt-c p-10
span @click=上一个 /span
输入类型=text v型=year 年
输入类型= text v-model= month class= month 月
span @click=下一个 /span
/div
div class=工作日弹性jc-sb p-5天
p v-for=周列表中的项目：key=item.id{{item}}/p
/div
div class=工作日弹性p-5日
太空日中的项目：key=item.id/p
p v-for=(item，idx)于(月日[本。month-1] 30) @ click= setDay(idx):class= idx==active day？"活动“:”:key=“item。id“{ item } }/p
/div
/div
/模板
脚本
导出默认值{
名称：日历，
data(){
返回{
年份： ,//年份
月份： ,//月份
日期： ,//天数
当前： ,//当前时间
周列表：[周一,周二,周三,周四,周五,周六,周日],
月日：[31,,31,30,31,30,31,31,30,31,30,30,31],
活动日： ,//选中的日期
太空日： ,//每个月第一天是星期几
二月： //判断2月份的天数
}
},
已创建(){
this.current=新日期()
this.getTheCurrentDate()
this.getMonthFisrtDay()
这个。二月=this.isLeapYear(今年)?28 : 29
this.monthDay.splice(1，1，this .二月)
},
观察：{
月(){
if(this.month12this.month1){
console.log(请输入正确月份)
返回
}
this.getMonthFisrtDay()
},
年份(){
this.getMonthFisrtDay()
}
},
方法：{
//判断是否是闰年
一年{
返回年份% 4==0年% 100!=0 年% 400==0;
},
//选取特定天数
setDay(idx){
this.activeDay=idx
这一天=idx 1
console.log(选择的日期是本年 本月 本日)
},
//判断月份的第一天是星期几
getMonthFisrtDay(){
var firstDayOfCurrentMonth=新日期（今年，本月-1,1) //某年某月的第一天
if(当月的第一天。getday()==0){
this.spaceDay=6
}否则{
这个。空间日=当月的第一天。getday()-1
}
},
//获取当前的日期
getTheCurrentDate(){
这个。年份=这个。当前。getfullyear()
这个。月=这个。当前。getmonth()1
this.day=this.current.getDate()
},
prev(){
if(this.month==1){
今年-
本月=12
}否则{
这个月-
}
this.activeDay=0
this.getMonthFisrtDay()
},
下一个(){
如果(this.month==12){
今年
本月=1
}否则{
本月
}
this.activeDay=0
this.getMonthFisrtDay()
}
}
}
/脚本
样式lang=scss 范围
#日历{。txt-c{
文本对齐：居中；
}。p-10
填充：2rem
}。p-5{
填充：1个；
}。弹性{
显示器：flex
}。jc-sb{
justify-content:space-between；
}
输入{
宽度：50px。月份{
宽度：30px
}
}。日{
柔性包装：缠绕；
p{
宽度：14.28%;
/* flex:0 0 0；*/
文本对齐：居中；
行高：2.4米；
身高：2.4雷姆；
位置：相对；
z指数：100;活动{
颜色：# fff
}。活动：之前{
内容："";
身高：2.5雷姆；
宽度：2.5雷姆；
位置：绝对；
z索引：-1;
左：0;
top:0；
transform:平移x(50%)；
边界半径：50%;
背景：# e97163
颜色：# fff
}
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。