uniapp uni-calendar日历实现考勤统计功能

根据日历组件代码结构 构成相应结构的状态统计数据 list 再遍历到每日的子组件中

javascript 复制代码
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
	<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
		:selected="selected" :state="list[weeks.date]" :lunar="lunar" :checkHover="range" @change="choiceDate"
		@handleMouse="handleMouse">
	</calendar-item>
</view>


根据每日的状态字段完成样式的判断,展示状态

javascript 复制代码
view style="display: flex;" v-if="state.clockInState && !weeks.disable">
	<view :style="[{'width': '6px'},{'height': '6px'},{'background-color': state.clockInState === 1 ? 'rgba(25,190,107,1)' : '#F0B230'},{'border-radius': '5px'}]"></view>
	<view :style="[{'width': '6px'},{'height': '6px'},{'background-color': state.clockOutState === 1 ?'rgba(25,190,107,1)' : '#F0B230'},{'border-radius': '5px'},{'margin-left': '5px'}]"></view>
</view>
相关推荐
还在学习进步2 分钟前
C语言第九周课——经典算法
c语言·开发语言·算法
阿七想学习4 分钟前
数据结构《链表》
java·开发语言·数据结构·学习·链表
极客代码6 分钟前
【Python TensorFlow】进阶指南(续篇二)
开发语言·人工智能·python·深度学习·tensorflow
亿牛云爬虫专家16 分钟前
如何在Puppeteer中实现表单自动填写与提交:问卷调查
javascript·爬虫·爬虫代理·puppeteer·问卷调查·代理ip·表单
计算机学姐20 分钟前
基于Python的高校成绩分析管理系统
开发语言·vue.js·后端·python·mysql·pycharm·django
VertexGeek21 分钟前
Rust学习(三):rust基础Ⅱ
开发语言·学习·rust
一个数据小开发27 分钟前
业务开发问题之ConcurrentHashMap
java·开发语言·高并发·map
FIRE28 分钟前
uniapp小程序分享使用canvas自定义绘制 vue3
前端·小程序·uni-app
三小尛1 小时前
插入排序(C语言)
c语言·开发语言
南宫理的日知录1 小时前
106、Python并发编程:深入浅出理解线程池的内部实现原理
开发语言·python·学习·编程学习