dai
3 years ago
2 changed files with 367 additions and 100 deletions
@ -1,151 +1,231 @@ |
|||
<template> |
|||
<div> |
|||
<el-row> |
|||
<el-col> |
|||
<div class="top-con"> |
|||
<div class="top" v-for="item in top" :key="item">{{ item }}</div> |
|||
</div> |
|||
<!-- 日历号 --> |
|||
<div class="date-con"> |
|||
<div |
|||
class="date" |
|||
:class="[item.thisMonth, item.isToday, item.afterToday]" |
|||
v-for="(item, index) in visibleCalendar" |
|||
:key="index" |
|||
> |
|||
<div>{{ item.day }}</div> |
|||
<div class="morning">张三，李四</div> |
|||
<div class="evening">王五，赵六</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="m-calendar"> |
|||
<div class="top-list"> |
|||
<div |
|||
class="top" |
|||
v-for="(item, index) in top" |
|||
:class="{ 'z-weekend': index > 4 }" |
|||
:key="item" |
|||
> |
|||
{{ item }} |
|||
</div> |
|||
</div> |
|||
<!-- 日历号 --> |
|||
<div class="date-list"> |
|||
<div |
|||
class="date-item" |
|||
:class="{ |
|||
'z-on': item.format == currentDate, |
|||
'z-this-month': item.thisMonth, |
|||
'z-today': item.isToday, |
|||
'z-after-today': item.afterToday, |
|||
'z-weekend': item.day == 6 || item.day == 0, |
|||
}" |
|||
v-for="(item, index) in visibleCalendar" |
|||
:key="index" |
|||
@click="handleClickDate(item)" |
|||
> |
|||
<div class="date">{{ item.date }}</div> |
|||
<slot name="date-item" v-bind:info="item"></slot> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
time: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
year: new Date().getFullYear(), |
|||
month: new Date().getMonth(), |
|||
}; |
|||
}, |
|||
currentYear: { |
|||
type: Number, |
|||
default: new Date().getFullYear(), |
|||
}, |
|||
currentMonth: { |
|||
type: Number, |
|||
default: new Date().getMonth(), |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
top: ["一", "二", "三", "四", "五", "六", "日"], |
|||
currentDate: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
console.log("123", this.time); |
|||
}, |
|||
methods: { |
|||
// 获取 |
|||
}, |
|||
computed: { |
|||
// 获取当前月份显示日历,共42天 |
|||
visibleCalendar() { |
|||
// 获取今天的年月日 |
|||
const { currentYear, currentMonth } = this; |
|||
const today = new Date(); |
|||
today.setHours(0); |
|||
today.setMinutes(0); |
|||
today.setSeconds(0); |
|||
today.setMilliseconds(0); |
|||
|
|||
const calendarArr = []; |
|||
// 获取当前月份第一天 |
|||
const currentFirstDay = new Date(this.time.year, this.time.month, 1); |
|||
const currentFirstDay = new Date(currentYear, currentMonth, 1); |
|||
// 获取第一天是周几 |
|||
const weekDay = currentFirstDay.getDay(); |
|||
// 用当前月份第一天减去周几前面几天，就是看见的日历的第一天 |
|||
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000; |
|||
|
|||
// 我们统一用42天来显示当前显示日历 |
|||
let calendarArr = []; |
|||
for (let i = 0; i < 42; i++) { |
|||
const date = new Date(startDay + i * 24 * 3600 * 1000); |
|||
const dateObj = new Date(startDay + i * 24 * 3600 * 1000); |
|||
const year = dateObj.getFullYear(); |
|||
const month = dateObj.getMonth(); |
|||
const date = dateObj.getDate(); |
|||
const day = dateObj.getDay(); |
|||
|
|||
calendarArr.push({ |
|||
date: new Date(startDay + i * 24 * 3600 * 1000), |
|||
year: date.getFullYear(), |
|||
month: date.getMonth(), |
|||
day: date.getDate(), |
|||
date, |
|||
year, |
|||
month, |
|||
day, |
|||
format: `${year}-${month + 1}-${date + 1}`, |
|||
// 是否在当月 |
|||
thisMonth: |
|||
date.getFullYear() === today.getFullYear() && |
|||
date.getMonth() === today.getMonth() |
|||
? "thisMonth" |
|||
: "", |
|||
thisMonth: year == currentYear && month == currentMonth, |
|||
// 是否是今天 |
|||
isToday: |
|||
date.getFullYear() === today.getFullYear() && |
|||
date.getMonth() === today.getMonth() && |
|||
date.getDate() === today.getDate() |
|||
? "isToday" |
|||
: "", |
|||
year === today.getFullYear() && |
|||
month === today.getMonth() && |
|||
date === today.getDate(), |
|||
// 是否在今天之后 |
|||
afterToday: date.getTime() >= today.getTime() ? "afterToday" : "", |
|||
afterToday: dateObj.getTime() >= today.getTime(), |
|||
}); |
|||
} |
|||
return calendarArr; |
|||
}, |
|||
}, |
|||
watch: { |
|||
visibleCalendar(val) { |
|||
if (!this.currentDate) { |
|||
this.handleClickDate( |
|||
val.find((item) => item.isToday) || |
|||
val.filter((item) => item.thisMonth)[0] |
|||
); |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
console.log("123", this.time); |
|||
}, |
|||
methods: { |
|||
handleClickDate(item) { |
|||
console.log("点击日历日期", item); |
|||
this.currentDate = item.format; |
|||
|
|||
this.$emit("clickDate", item); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.top-con { |
|||
display: flex; |
|||
align-items: center; |
|||
.top { |
|||
width: 14.285%; |
|||
background-color: rgb(242, 242, 242); |
|||
padding: 10px 0; |
|||
margin: 5px; |
|||
text-align: center; |
|||
.m-calendar { |
|||
position: relative; |
|||
color: #333333; |
|||
|
|||
&::after { |
|||
content: ""; |
|||
z-index: 1; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
border-left: 1px solid #eee; |
|||
border-top: 1px solid #eee; |
|||
pointer-events: none; |
|||
} |
|||
} |
|||
.date-con { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.date { |
|||
width: 14.285%; |
|||
text-align: center; |
|||
padding: 5px; |
|||
.morning { |
|||
padding: 10px 0; |
|||
background-color: rgba(220, 245, 253, 0.3); |
|||
} |
|||
.evening { |
|||
|
|||
.top-list { |
|||
display: flex; |
|||
align-items: center; |
|||
.top { |
|||
position: relative; |
|||
width: 14.285%; |
|||
padding: 10px 0; |
|||
background-color: rgba(220, 244, 209, 0.3); |
|||
} |
|||
} |
|||
.thisMonth { |
|||
.morning { |
|||
background-color: rgb(220, 245, 253); |
|||
} |
|||
.evening { |
|||
background-color: rgb(220, 244, 209); |
|||
text-align: center; |
|||
background-color: #ffffff; |
|||
|
|||
&::after { |
|||
content: ""; |
|||
z-index: 1; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
border-right: 1px solid #eee; |
|||
pointer-events: none; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
&.z-weekend { |
|||
color: #ff3333; |
|||
} |
|||
} |
|||
} |
|||
.isToday { |
|||
font-weight: 700; |
|||
.morning { |
|||
background-color: rgb(169, 225, 243); |
|||
} |
|||
.evening { |
|||
background-color: rgb(193, 233, 175); |
|||
.date-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
|
|||
.date-item { |
|||
position: relative; |
|||
width: 14.285%; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
padding: 8px 0; |
|||
height: 90px; |
|||
background-color: #ffffff; |
|||
opacity: 0.5; |
|||
|
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
z-index: 1; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
border-right: 1px solid #eee; |
|||
border-bottom: 1px solid #eee; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.date { |
|||
margin-bottom: 5px; |
|||
line-height: 30px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
&.z-on { |
|||
z-index: 21; |
|||
box-shadow: 0 0 15px 5px #a8cee0; |
|||
.date { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
&.z-this-month { |
|||
opacity: 1; |
|||
} |
|||
|
|||
&.z-today { |
|||
.date { |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
|
|||
&.z-weekend { |
|||
.date { |
|||
color: #ff3333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.tip-con { |
|||
margin-top: 51px; |
|||
.tip { |
|||
margin-top: 21px; |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue