You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.5 KiB
109 lines
2.5 KiB
1 year ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-07-12 09:27:42
|
||
|
|
@ 备注: 日历
|
||
|
|
-->
|
||
|
|
<script lang='ts' setup>
|
||
|
|
import DateClass from '@/api/calendar/DateClass';
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
bodyHight:Number,
|
||
|
|
});
|
||
|
|
const taday = ref<any>([]);
|
||
|
|
const curtteDayType = ref(1)
|
||
|
|
const curtteDay = ref(1)
|
||
|
|
|
||
|
|
|
||
|
|
const curttWeek = computed(()=>{
|
||
|
|
if(taday.value.length <= 0){
|
||
|
|
taday.value = DateClass.getCurrent()
|
||
|
|
}
|
||
|
|
return DateClass.getWeek(DateClass.solarWeek(taday.value[0],taday.value[1],taday.value[2]))
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
const curtteMonth = computed(()=>{
|
||
|
|
if(taday.value.length <= 0){
|
||
|
|
taday.value = DateClass.getCurrent()
|
||
|
|
}
|
||
|
|
if(taday.value.length >= 2){
|
||
|
|
return taday.value[0]+"年"+taday.value[1]+"月"
|
||
|
|
}
|
||
|
|
})
|
||
|
|
/**
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-07-12 11:12:12
|
||
|
|
@ 功能: 后退时间
|
||
|
|
*/
|
||
|
|
const backTime = () =>{
|
||
|
|
if(taday.value.length <= 0){
|
||
|
|
taday.value = DateClass.getCurrent()
|
||
|
|
}
|
||
|
|
taday.value = DateClass.gobackTime(taday.value[0],taday.value[1],taday.value[2],curtteDayType.value)
|
||
|
|
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-07-12 14:04:06
|
||
|
|
@ 功能: 前进时间
|
||
|
|
*/
|
||
|
|
const forwardTime = () =>{
|
||
|
|
if(taday.value.length <= 0){
|
||
|
|
taday.value = DateClass.getCurrent()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="calBox" :style="'height:calc(100vh - '+ props.bodyHight +'px)'">
|
||
|
|
<!--日历头部-->
|
||
|
|
<div class="calHead">
|
||
|
|
<div>
|
||
|
|
<i class="fa fa-calendar icont"></i>
|
||
|
|
<el-text class="day">{{curtteMonth}}</el-text>
|
||
|
|
<el-text class="week">{{curttWeek}}</el-text>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-button-group class="ml-4">
|
||
|
|
<el-button size="small" >今天</el-button>
|
||
|
|
<el-button :color="curtteDayType==1?'#a0cfff':''" @click="curtteDayType=1" size="small" >月</el-button>
|
||
|
|
<el-button :color="curtteDayType==2?'#a0cfff':''" @click="curtteDayType=2" size="small" >周</el-button>
|
||
|
|
<el-button :color="curtteDayType==3?'#a0cfff':''" @click="curtteDayType=3" size="small" >日</el-button>
|
||
|
|
<el-button size="small" class="fa fa-angle-left" @click="backTime()"></el-button>
|
||
|
|
<el-button size="small" class="fa fa-angle-right" @click="forwardTime()"></el-button>
|
||
|
|
</el-button-group>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="weekNumber">
|
||
|
|
{{DateClass.getMonday(taday[0],taday[1],taday[2],'e',0) }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.calBox{
|
||
|
|
width: 100%;
|
||
|
|
.calHead{
|
||
|
|
padding: 10px 0;
|
||
|
|
border-bottom: 1px solid #ccc;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.icont{
|
||
|
|
font-size:20px;
|
||
|
|
}
|
||
|
|
.day{
|
||
|
|
font-size:20px;
|
||
|
|
padding: 0 10px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.weekNumber{
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|