发表于: 2020-05-23 23:06:36
0 2137
今天完成的事情:
通过修饰符stop来组织冒泡实现聚焦input显示日历,点击别处之后日历隐藏,点击header部分则正常切换:
<template>
<div id="calendar" class="ds-flex bg-white b-xs-lGray round-md flex-direction-column z-index-2">
<header id="calendarHeader" class="width-p100 ds-flex flex-direction-row justify-content-between" @click.stop>
<button class="py-xs px-sm m-xxs ds-flex b-xs-lGray bg-white justify-content-center align-items-center round-md" @click="lastMouth">
<div class="dateBack"></div>
</button>
<button class="dateMidBtn m-xxs py-xs width-p100 bg-white b-xs-lGray round-md">{{headerMessage}}</button>
<button class="py-xs px-sm m-xxs ds-flex b-xs-lGray bg-white justify-content-center align-items-center round-md" @click="nextMouth">
<div class="dateNext"></div>
</button>
</header>
<calendarDate :sendMouth='mouth' @sendHeaderMessage='getHeaderMessage' @calendarText = 'calendarText'></calendarDate>
</div>
</template>
然后已经完成了在本年度的日历,
但是当变成前年或者后年的时候页面逻辑会出现问题,还需要调试。
-----------
写完日报之后不甘心又看了一会代码果然逻辑是没有问题的但是问题是在非闰年的时候没有考虑,改一发闰年的逻辑就没问题了。
明天要做的事情:
完成月历,年历。修改整个任务的不足处
评论