如何实现一个基于Vue的DatePicker组件的手写示例？

本文共计3392个文字，预计阅读时间需要14分钟。

概述+在日常工作中，几乎不可避免会用到时间组件，我们的第一反应就是直接到组件库去找现成的来用。实际上，时间组件看起来还是相当复杂的，对于没接触过的人来说，要自己写一个可能需要花费不少时间。

概述

在日常工作中，比不可少会用到时间组件，我们的第一反应就是直接到组件库去找一下现成的来用下，毕竟，时间组件看起来还是很复杂的，对于没接触过的人来说，要自己去写一个这样的组件出来，还是有难度的，但是作为一名前端开发，这么常见的组件，我们还是值得取自己写一个这样的组件的，现在就手把手带你实现vue中的DatePicker组件。看完不会找我。

前置知识

在开始写代码之前，建议代价先看看时间组件的布局，目前主流的组件库iview ,element等提供的时间组件布局都基本类似，功能也差不多，因此在这里实现的组件库的布局也也element家的布局差不多，大家先看下布局的最终样子。 这是日的时间组件，当我们这个能实现的时候，像那些年，月的就更简单了，因此这里我们只实现一个，其他的可以自己扩展。

布局方面

• 我们可以看到最终时间组件可以拆分为两大部分，最上面可以拆分为一个时间切换的组件，下面为一个table，用于记录日期，下面的表格我们又可以拆分为上面的星期组件，和下面的日期具体实现组件。
• 然后，我们注意观察，表格是一个6行七列共计42个单元格的布局形式，包含上月的剩余天数，当前月份的全部天数，以及下月的开始天数，加起来组成42个单元格。其中上月和下月我们布局样式区别于当前月份的布局，还有就是当前天数的那个日期，我们需要高亮显示。