Vue的DatePicker组件如何实现长尾词功能？

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

概述+在日常工作中，不夸张地说，时间组件是我们最常用到的库之一。我们的第一反应就是直接到组件库去找现成的使用。但实际上，时间组件看起来还是相当复杂的。对于没接触过的人来说，可能需要自己去编写一个。

概述

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

前置知识

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

布局方面

• 我们可以看到最终时间组件可以拆分为两大部分，最上面可以拆分为一个时间切换的组件，下面为一个table，用于记录日期，下面的表格我们又可以拆分为上面的星期组件，和下面的日期具体实现组件。