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语言·开发语言·c++·学习·算法·objective-c
夫琅禾费米线9 分钟前
JavaScript 中的 Generator 函数及其方法
开发语言·前端·javascript
@小博的博客15 分钟前
C++初阶学习 第十二弹——stack与queue的介绍和使用
开发语言·数据结构·c++·学习
世界和平�����27 分钟前
vue3 命名式(函数式)弹窗
前端·javascript·vue.js
所遇所思37 分钟前
vue项目中中怎么获取环境变量
前端·javascript·vue.js
ljklxlj1 小时前
webview4/edgewebbrower学习记录——执行js
前端·javascript·学习
techdashen1 小时前
Go与黑客(第四部分)
开发语言·后端·golang
宇宙大豹发1 小时前
【Python】爬虫实战:高效爬取电影网站信息指南(涵盖了诸多学习内容)
开发语言·爬虫·python·学习·python爬虫·python代码·python使用
蓝桉柒71 小时前
web前端开发--动画效果
开发语言·前端·css
叫我王员外就行2 小时前
Vue第一篇:组件模板总结
前端·javascript·vue.js