2021-11-23 vue3.2.21借助dayjs封装dateTimeSelector日期时间选择器组件

实现效果

日期时间选择器

1、开发date组件

首先通过上月与本月的天数，计算出偏移天数，然后绘制出date组件；然后监听鼠标mouseenter和click事件；记录开始时间、结束时间以及鼠标滑过的时间(在点击了开始时候而没点击结束时间的情况下)；最后根据传入的（如果有传入的话）minDate和maxDate来做是否能够切换年、月及日期是否能够被选中等判断；

2、开发scrollBar组件

scrollBar每个item的高度是固定的20px，计算每个item位置记录在数组中（[20,40,…20 * i]）；滚动的时候，计算出数组中与当前scrollTop最近的值pos，那个这个pos就是最后的scrollTop位置；

3、自定义指令clickOutSlide

在点击scrollBar、date组件外面的的时候会关闭scrollBar、date组件；这里是通过自定义指令clickOutSlide实现的；思路就是在document上监听了click方法，判断被点击的el是否是组件的子节点；

自定义指令在script setup中使用的时候，必须命名成vNameOfDirective;

使用：

总结

自己动手封装组件的过程中，能够静下心来思考，并且学到很多东西；代码上传到了github，点击这里查看项目代码；