考试
This commit is contained in:
13684185576
248
src/components/ZbCalendar/Calendar.vue
Normal file
248
src/components/ZbCalendar/Calendar.vue
Normal file
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<!-- 日历组件 -->
|
||||
<div class="calender">
|
||||
<div class="date-header">
|
||||
<!-- 切换日期按钮 -->
|
||||
<div class="btn-month">
|
||||
<div>
|
||||
<!-- <button @click="handleYear(-1)"><<</button> -->
|
||||
<el-button size="small" @click="handlePrev">
|
||||
<ArrowLeftBold style="width: 12px; height: 12px" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="show-date">{{ year }}年{{ month }}月</div>
|
||||
<div>
|
||||
<el-button size="small" @click="handleNext">
|
||||
<ArrowRightBold style="width: 12px; height: 12px" />
|
||||
</el-button>
|
||||
<!-- <button @click="handleYear(1)">>></button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="date-content">
|
||||
<div class="week-header">
|
||||
<div
|
||||
v-for="item in [
|
||||
'周日',
|
||||
'周一',
|
||||
'周二',
|
||||
'周三',
|
||||
'周四',
|
||||
'周五',
|
||||
'周六'
|
||||
]"
|
||||
:key="item"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="week-day">
|
||||
<div v-for="item in 42" :key="item + 'day'">
|
||||
<!-- 当月 -->
|
||||
<div
|
||||
:class="getDay(item - beginDay()) ? 'active' : ''"
|
||||
v-if="item - beginDay() > 0 && item - beginDay() <= prevDays(0)"
|
||||
@click="chack(item - beginDay())"
|
||||
>
|
||||
<span class="day">{{ item - beginDay() }}日</span>
|
||||
<div
|
||||
class="btn_day"
|
||||
v-for="(c, i) in data.filter(
|
||||
(evn) => evn.day * 1 == item - beginDay()
|
||||
)"
|
||||
:key="c * i"
|
||||
>
|
||||
<div class="tit" :style="{ backgroundColor: c.color }">
|
||||
{{ c.title }}
|
||||
</div>
|
||||
<div class="time">{{ c.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 上月 -->
|
||||
<div
|
||||
class="other-day"
|
||||
v-else-if="item - beginDay() <= 0"
|
||||
@click="handlePrev"
|
||||
>
|
||||
<span class="day">{{ item - beginDay() + prevDays(1) }}日</span>
|
||||
</div>
|
||||
<!-- 下月 -->
|
||||
<div class="other-day" v-else @click="handleNext">
|
||||
<span class="day">{{ item - beginDay() - prevDays(0) }}日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, defineProps, watch, defineEmits } from "vue";
|
||||
const emit = defineEmits(["calClick"]);
|
||||
const props = defineProps({
|
||||
//数据
|
||||
list: Array
|
||||
});
|
||||
watch(
|
||||
() => props.list,
|
||||
() => {
|
||||
data.value = [...props.list];
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const arr = ref([1]);
|
||||
const active = ref(null);
|
||||
const year = ref(null);
|
||||
const month = ref(null);
|
||||
const day = ref(null);
|
||||
const curDate = ref(null);
|
||||
const nextDay = ref(null);
|
||||
const data = ref([]);
|
||||
|
||||
function getInitDate() {
|
||||
const date = new Date();
|
||||
year.value = date.getFullYear();
|
||||
month.value = date.getUTCMonth() + 1;
|
||||
day.value = date.getDate();
|
||||
curDate.value = `${year.value}-${month.value}-${day.value}`;
|
||||
}
|
||||
// 獲取當天日期
|
||||
function getDay(e) {
|
||||
const date = new Date();
|
||||
const dqTime =
|
||||
date.getFullYear() + "-" + (date.getMonth() + 1) + date.getDate();
|
||||
return dqTime === year.value + "-" + month.value + e;
|
||||
}
|
||||
//获取1号开始位置
|
||||
function beginDay() {
|
||||
return new Date(year.value, month.value - 1, 1).getDay();
|
||||
}
|
||||
// 获取某月天数
|
||||
function prevDays(e) {
|
||||
return new Date(year.value, month.value - e, 0).getDate();
|
||||
}
|
||||
function handlePrev() {
|
||||
active.value = null;
|
||||
data.value = [];
|
||||
if (month.value == 1) {
|
||||
month.value = 12;
|
||||
year.value--;
|
||||
} else {
|
||||
month.value--;
|
||||
}
|
||||
emit("calClick", year.value + "-" + month.value);
|
||||
}
|
||||
function handleNext() {
|
||||
active.value = null;
|
||||
data.value = [];
|
||||
if (month.value == 12) {
|
||||
month.value = 1;
|
||||
year.value++;
|
||||
} else {
|
||||
month.value++;
|
||||
}
|
||||
emit("calClick", year.value + "-" + month.value);
|
||||
}
|
||||
function handleYear(e) {
|
||||
active.value = null;
|
||||
year.value += e;
|
||||
}
|
||||
function chack(e) {}
|
||||
|
||||
onMounted(() => {
|
||||
getInitDate();
|
||||
data.value = props.list;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.calender {
|
||||
height: calc(100% - 80px);
|
||||
// overflow-y: scroll;
|
||||
.date-header {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.btn-month {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.show-date {
|
||||
font-size: 18px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
.date-content {
|
||||
.week-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> div {
|
||||
width: 13%;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
border-left: 1px solid #266ff8;
|
||||
border-top: 1px solid #266ff8;
|
||||
}
|
||||
> div:nth-child(7) {
|
||||
border-right: 1px solid #266ff8;
|
||||
}
|
||||
}
|
||||
.week-day {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
> div:nth-child(7n) {
|
||||
border-right: 1px solid #266ff8;
|
||||
}
|
||||
> div:nth-child(36),
|
||||
> div:nth-child(37),
|
||||
> div:nth-child(38),
|
||||
> div:nth-child(39),
|
||||
> div:nth-child(40),
|
||||
> div:nth-child(41),
|
||||
> div:nth-child(42) {
|
||||
border-bottom: 1px solid #266ff8;
|
||||
}
|
||||
> div {
|
||||
border-left: 1px solid #266ff8;
|
||||
border-top: 1px solid #266ff8;
|
||||
width: 13%;
|
||||
min-height: 10vh;
|
||||
.btn_day {
|
||||
text-align: center;
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
margin: 0 50px;
|
||||
line-height: 2em;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.time {
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.other-day,
|
||||
.other-day {
|
||||
color: #858585;
|
||||
// height: 11vh;
|
||||
}
|
||||
.day {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
.active {
|
||||
position: relative;
|
||||
}
|
||||
.active::after {
|
||||
content: "当天";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgb(63, 128, 248);
|
||||
padding: 4px;
|
||||
border-radius: 0 0 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user