vue实现一个炫酷的日历组件,vue日程
这篇文章主要为大家详细介绍了vue。j实现日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue。j实现日历功能的具体代码，供大家参考，具体内容如下
开源代码库
功能需求
使用vue。j实现指定年月的日历表，配合后台接口数据，添加对应日期的空气质量描述等信息。后台传递当月空气质量指数的数据，前端生成日历表后将空气质量指数添加到对应日期上。
空气质量数据示例：
data.json
{
代码:200,
消息":",
数据:[{
时间: 2020-08-01 ,
kqzl :优
},
{
时间: 2020-08-02 ,
kqzl :良
},
{
时间: 2020-08-03 ,
kqzl :良
}
]
}
实现方法
模板
div id=应用程序
h1 style= text-align:center；
2020年8月一日
div class=日历容器
div class=日历周
div class=cw-inner
div class=cw-item
:style={width: setItemWidth}
v-for=(项目，索引)星期
:key=index
{{item}}
/div
/div
/div
div class=日历日
div class=cd-list
v-for=(item，index) of day
:key=index
div class=" cl-item "
:style={width: setItemWidth}
v-for=(子项，索引)的项目
:key=index
:class=[{has: child}]
div class=ci-inner
v-if=child
span{{child.date}}/span
span v-if=child.text
阿奇
:class=child.text.kqzl
{{child.text.kqzl}}
/span
/div
/div
/div
/div
/div
/div
/模板
脚本
从导入kqzlData ./assets/data.json //空气质量数据
导出默认值{
名称："应用程序",
data() {
返回{
周：[
星期一，
星期二，
星期三，
星期四，
星期五，
星期六，
星期日，
],
日期：[],
}
},
计算值：{
setItemWidth() {
返回100/7"%"
},
},
已安装(){
this.createCalendar(2020，8)
},
方法：{
/**
* @姓名：格式化日期
* @param {date}
*/
日期格式（日期){
let dateArr=date.split(-)
设mounth=dateArr[1]=10？dateArr[1]:"0"dateArr[1]
假设day=dateArr[2]=10？dateArr[2]:"0"dateArr[2]
返回日期Arr[0] -月-日
},
/**
* @姓名：日期信息
* @param {date}
*/
getDayInfo(日期){
设kqzl=kqzlData.data
让格式日期=这个。日期格式(日期)
设txt=kqzl[kqzl。查找索引(item=item。时间===格式日期)]
返回文本
},
/**
* @姓名：生成日历表
* @param {year}
* @param {mounth}
*/
创建日历（年份、月份){
//某个月一共有多少天
让全天=新日期（年，月，0)。获取日期()
//某个月一号是星期几
let firstDay=this.judjeFirstDay(年份、月份)
//需要多少行来展示
让行=数学。ceil((全天第一天)/7)
让k=第一天- 1
假设结果=[]
让计数=1
//生成日历二维数组
对于(设I=0；我划船；i ) {
结果[我]=新数组(7)
做{
if (count=allDay) {
结果[i][k]={
日期：计数，
//根据接口匹配日期对应的信息
正文：这个。getdayinfo(年份-月份-计数)，
}
k
数数
}否则{
破裂
}
} while (k 7)
k=0
}
这一天=结果
},
/**
* @姓名：判断某年某月一号是星期几
* @param {year}
* @param {mounth}
*/
judjeFirstDay(年、月){
字母日期=新日期（年份，月份- 1,1)
let week=date.getDay()
让weekArr=[1，2，3，4，5，6，7]
返回第一周
},
},
}
/脚本
样式lang=scss 。日历容器{
文本对齐：居中；日历周{
边距-底部：4px
填充：0 4px
颜色：# fff。顺时针-内部{
溢出：隐藏；
背景：# a0a0a0。CW-项目{
浮动：左；
填充：8px 0；
}
}
}。日历日{。cd-list {
溢出：隐藏；氯离子项目{
浮动：左；
最小高度：30px
框大小：边框-框；
填充：4px。氯离子内部{
背景：# f5f5f5
填充：8px 0；
跨度{
显示：内嵌-块；aqi {
颜色：# fff
背景：# a7cf8c
填充：0 4px
边框-半径：4px
}。优{
背景：# a7cf8c
}。良{
背景：# f7da64
}。轻度{
背景：# f29e39
}。中度{
背景：# da555d
}。重度{
背景：# b9377a
}。严重{
背景：# 881326;
}
}
}
}
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。