实现效果
日期时间选择器
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,点击这里查看项目代码;