用vue实现类ant Design的日历组件

前言

最近在对以前写的vue项目进行优化，并且进行了一些功能的完善，我写了一个周报系统，其中一个完善的功能就是，可以通过日历选择以往的周报。于是我着手ant Design的一些功能，自己实现了一个周报组件。

一些图片

• 未选择时
  
• 鼠标移上去
  
• 选中状态
  

问题

1. input聚焦问题

我的设想是这样的，日历首先是用v-if="show"，show=false设置了隐藏，我们在点击input框的时候，日历会显示出来，然后我们在点击非日历的部分的时候，日历会隐藏。

 <div class="showWeek" @focus ="show=true" @blur="show=false" ref="showWeek" v-if="show"> 

为了实现这个功能，我给input输入框绑定了focus事件和blur，当focus事件触发时，日历显示，当blur事件触发时，日历隐藏。
可是这时出现了一个问题，我在对日历上的日期进行选择的时候，input框失去了焦距，触发了blur事件。

后面我想了一个办法，就是只给input框绑定click事件，设置一个stop防止冒泡，点击input之后日历显示，

<div class="showWeek" @click.stop ="show=true" ref="showWeek" v-if="show">