周日历组件

<template>
    {{ currentDay }}
    <div class="calendatFa">
        <div v-for="(item,index) in timeList" :key="index">
            <div class="divStyle" style="color:#86969C">{{item.name}}</div>
            <div :id="'date'+index" @click="dateClick(item,index)" :style="{color:(index===0||index===6)?'#C9D0D4':'#1D2129',cursor: 'pointer'}" :class="{divStyle:true,dateStyle:index === weekDay}">{{item.day}}</div>
            <div class="divStyle">
                <!-- <div class="workDayIcon" v-if="item.needWork"></div> -->
                <div class="workDayIcon" v-if="index!==0&&index!==6"></div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {  ref } from 'vue'
let dataList:any = ref(['日','一','二','三','四','五','六',])
let timeList:any = ref([])
let weekDay = ref(0)
const currentDay = ref('')
const dateClick = (item:any,index:any) =>{
    // 设置点击背景色
    for(let i=0;i<7;i++){
        let dom:any = document.getElementById('date'+i)
        if (dom){
            if (index == i) {
                dom.style.backgroundColor = '#05A4B6'
            }else{
                dom.style.backgroundColor = '#fff'
            }
        }
    }
    currentDay.value= `${item.year}年${item.month}月${item.day}日`
    // 调接口查询数据

}
const getTimeList = ()=>{
    timeList.value = []
    let time = new Date()
    weekDay.value = time.getDay()
    // 循环出周日到周六
    for(let i=0;i<7;i++){
        let year,month,day;
        if((weekDay.value-i)>0){
            year= new Date(time.getTime()-((weekDay.value-i)*1000*60*60*24)).getFullYear() 
            month= new Date(time.getTime()-((weekDay.value-i)*1000*60*60*24)).getMonth()+1 
            day= new Date(time.getTime()-((weekDay.value-i)*1000*60*60*24)).getDate() 
        }else{
            year= new Date(time.getTime()+((i-weekDay.value)*1000*60*60*24)).getFullYear() 
            month= new Date(time.getTime()+((i-weekDay.value)*1000*60*60*24)).getMonth()+1 
            day= new Date(time.getTime()+((i-weekDay.value)*1000*60*60*24)).getDate() 
        }
        let obj = {
            name: dataList.value[i],
            year:year,
            month:month,
            day:day,
            needWork: false //该日期是否存在待办事项
        }
        timeList.value.push(obj)
    }
}

const initData = () =>{
    getTimeList()
}
initData()
</script>
<style  lang="less" scoped>
.calendatFa{
    margin: 8px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 14px;
}
.divStyle{
 width: 32px;
 padding: 4px;
 border-radius: 16px;
}
.dateStyle{
    border: 1px solid #05A4B6;
    
}
.workDayIcon{
    margin-left: 10px;
    margin-top: 2px;
    width: 4px;
    height: 4px;
    border-radius:2px ;
    background-color: #05A4B6;
}
</style>