基于element-ui实现未知类型的时间选择器(解决过程及最终理论效果)
近期入职的公司,主要做web后台和小程序开发。
web后台开发时,有个需求:用户希望选择时间的时候添加一些未知选项,比方说,我记得一件事,发生在2021年7月的上午9点30,但忘了具体是哪天了,我就可以选上年、月、时、分等还记得的时间,日以UK(unknown)表示,这样就能形成一个未知的时间 2021-07-UK 09:30,时间未知从月开始,均可选择未知。(说的还算有道理)
OK,需求大体这样,那就开始做
一开始,先看了下已有的组件,大体调研了几个,没有现成的...那就只能自己手动封装了。
因为项目是基于vue + element-ui进行开发的,因此时间选择器就以element-ui的date-picker为二次封装原点开始封装吧。
首先先扒出源码,因为要进行封装,总不至于在依赖里面直接改吧QAQ
扒出源码之后,看了下,这个时间选择器很严谨,内部组件传值全部以Date格式进行传递,组件还比较多(内心OS: 多恶心啊),第一反应:换一个,找个内部传值不是以date格式进行传递的不就得了,后来一想,直接用这个吧,也省的引入插件了(其实是没找到更好的替代品QAQ)
因为element-ui的时间选择器代码比较严谨,在做新型时间选择器的过程中,曾经尝试过打破内部的date传值的总传值风格,但最终失败了,而且是必败!!!作为一个成熟UI框架的时间选择器,选择的值就应该是date类型,肯定不能有别的类型,在一边骂这框架垃圾(不能完成咱的特定功能)的同时,也在佩服element-ui的开发者的严谨性,毕竟,所谓时间选择器,你要是能选出个非时间格式出来,那肯定是有问题的。(这又跟咱的开发相悖,头疼)
仔细想想这个事,貌似也没那么复杂,他的内部传值,传的是时间格式,但输出的可是‘年-月-日 时:分:秒‘啊,这是啥,这是字符串啊!!!豁然开朗,那就是在选择时间的时候,内部传值不变,在点击选中未知的时候,做一个标记,在最后转成字符串的时候,再转换成unknown不就完了么,相当于只需要截住date和string互相转换的时候就行,仔细想想,多low啊,但同时,这个问题倒确实是解决了。
思路大体就这样,就着以上思路来设计 ---- 举个例子:在选择UK日的时候,将‘日’字段的判断值改为TRUE,在date格式转换成字符串之后,根据这些判断值,继续对字符串进行处理,将转成的字符串中的‘日’对应的值改为UK返回出去,OK了,主流程完成;回显那就倒过来走,将字符串中带有UK的时间对应的字段改为01,对应的判断值设成TRUE,然后转成date格式,进行传递,OK,回显流程也完毕,剩下的细节,像精确到时分秒还是啥的,跟以前一样就好
当然问题也很明显,时间选择器选择的时间在内部传递是date格式,在选择未知后,页面上显示的还是选中的时间,仅仅是选择框内展示的值是想要的,我做的就仅仅是‘掐头去尾’,并没有从根本上改变时间选择器,因此使用效果并不是很好,有玩过类似需求/功能的大佬可以一起交流交流。