Vue组件之路-手机和PC上都好用的地区选择器

170

省市区选择弃弹框组件

首先说明一下哈,这是开启我组件之路的第三篇文章了,也是目前为止我组件库里面最复杂的组件了,希望大家多多指教,直接上图,看效果。 2.gif

说明:gif动图看起来没有实际流畅,大家可以去我的gitHub上下载源码,本地演示一下哦github.com/Mryuelaiyue…

这里组件的滑动动画与我之前写的轮播图类似,这里不再说明了。而组件中最麻烦的就是处理数据结构了,单个数据是一个对象,由name,parent和value三个属性组成,分别用来做展示、数据联动和值。

整个数据结构,我按照省市区分成了三个Map对象的数据,第一个Map下面是省份数据,第二个是市,第三个是区。每个Map对象对应的key值是一个parent值,用来数据之间操作数据间联动,value是该parent代表的所有数据。这里为了方便演示(其实是偷懒😁),我只是做了四个省份数据,包括两个直辖市,有需要的话大家可以自行补充一下。如果觉得还不错的,可以的话,大家点个赞那是最好的了

最后说一下,我的下一个日期选择器已经在路上了🥳🥳🥳