|
|
@ -1,35 +1,33 @@ |
|
|
|
<template> |
|
|
|
<div class="m-calendar"> |
|
|
|
<div class="top-list"> |
|
|
|
<div |
|
|
|
class="top" |
|
|
|
v-for="(item, index) in top" |
|
|
|
:class="{ 'z-weekend': index > 4 }" |
|
|
|
:key="item" |
|
|
|
> |
|
|
|
<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="{ |
|
|
|
<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)" |
|
|
|
> |
|
|
|
v-for="(item, index) in visibleCalendar" |
|
|
|
:key="index" |
|
|
|
@click="handleClickDate(item)"> |
|
|
|
<div class="date">{{ item.date }}</div> |
|
|
|
<div class="nongli"> |
|
|
|
{{ computeNongliText(item.year, item.month, item.date) }} |
|
|
|
</div> |
|
|
|
<slot name="date-item" v-bind:item="item" v-bind:index="index"> </slot> |
|
|
|
<slot name="date-item" |
|
|
|
v-bind:item="item" |
|
|
|
v-bind:index="index"> </slot> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -49,7 +47,7 @@ export default { |
|
|
|
default: new Date().getMonth(), |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
top: ["一", "二", "三", "四", "五", "六", "日"], |
|
|
|
currentDate: "", |
|
|
@ -57,7 +55,7 @@ export default { |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
// 获取当前月份显示日历,共42天 |
|
|
|
visibleCalendar() { |
|
|
|
visibleCalendar () { |
|
|
|
// 获取今天的年月日 |
|
|
|
const { currentYear, currentMonth } = this; |
|
|
|
const today = new Date(); |
|
|
@ -118,30 +116,30 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
visibleCalendar() { |
|
|
|
visibleCalendar () { |
|
|
|
this.init(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted () { |
|
|
|
console.log("123", this.time); |
|
|
|
this.init(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
computeNongliText(y, m, d) { |
|
|
|
let item = nongli.solar2lunar(y, m+1, d); |
|
|
|
computeNongliText (y, m, d) { |
|
|
|
let item = nongli.solar2lunar(y, m + 1, d); |
|
|
|
return item.festival || item.lunarFestival || item.Term || item.IDayCn; |
|
|
|
}, |
|
|
|
|
|
|
|
init() { |
|
|
|
init () { |
|
|
|
if (!this.currentDate) { |
|
|
|
this.handleClickDate( |
|
|
|
this.visibleCalendar.find((item) => item.isToday) || |
|
|
|
this.visibleCalendar.filter((item) => item.thisMonth)[0] |
|
|
|
this.visibleCalendar.filter((item) => item.thisMonth)[0] |
|
|
|
); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
handleClickDate(item) { |
|
|
|
handleClickDate (item) { |
|
|
|
console.log("点击日历日期", item); |
|
|
|
this.currentDate = item.format; |
|
|
|
|
|
|
@ -235,7 +233,7 @@ export default { |
|
|
|
color: #3e8ef7; |
|
|
|
} |
|
|
|
|
|
|
|
.nongli{ |
|
|
|
.nongli { |
|
|
|
position: absolute; |
|
|
|
z-index: 0; |
|
|
|
left: 0; |
|
|
|