定制组件那么难搞，还强求什么父子组件

年前最后一个海南项目，忙炸了，每天末班车也是麻木了。从上周接的一个组件开发需求，掰掰手指头算下来也耗时了半个月，超难呀，回想年初老大挨个约谈时候聊本身手头作的组件太简单，真是老脸一红。

要求的组件效果是这样婶的：

 

对我来讲的难点：

一、首先就是超复杂的结构样式，刚拿到需求写demo时候就已经错了好几回方向，错误的html结构会致使后面css样式和js逻辑超级无敌困难。

二、大佬的指导的思路是采用拆分红父子组件的方式分别进行，整个面板做为父组件完成单个线路切换的逻辑，每一个单独的线路做为子组件来解决繁琐的点击事件。好嘛，又是我没触及过的点，父子组件咋搞哟。

三、拆分红父子组件碰了一鼻子灰，但最艰难的每每是逻辑实现部分。整个面板分红启用区域和未启用区域，经过底部的按钮控制切换，如何实现动态数据下自适应切换。

四、单独线路中须要比较系统时间和数据时间，相同时候当前点位须要总体变成黄色，下一个点位时间到来时候再恢复原样。

根据大概总结的难点对应的解决方案。

一、首先是结构问题，写过好几个版本，最终肯定的是分三部分：header、content、footer三部分，header做为标题区域显示title和按钮，要求按钮能够随着启用区域宽度变化。Footer底部部分放巡检按钮，这里须要调用另一个地图组件的方法。Content部分就是主体的线路展现区域，根据后端数据动态显示线路。

1.一、写得越多的样式就越以为css真难，有更多的点须要学习。头部的标题部分不能设置width具体值，只设置固定的高度值，设置按钮为相对定位靠右间距为0，那这样就实现了按钮位置随着组件宽度改变位置。

1.二、Content中调用方法根据数据动态建立一个line线路容器，在线路容器中再根据数据动态建立点位。

二、同一组件下父子组件的写法，只须要在index.js文件直接引入子组件。子组件中书写格式按照element同样就能够了，可是要删除原有的build.json内容，没有label和version。其余的都同样了，在子组件中properties数据也是相通的，能够直接定义。

 

组件目录就是这样的：

 

三、写content的代码时候，须要理解一个思路，不要根据数据去操做dom节点，而是把每个模块做为对象数组中每一项。数据是数组格式，数据中每一项是一个对象，每一对象就是一个line容器，对象中数据就是line容器中每个点位数据。那增减的操做其实就是对数组的操做。

3.一、建立line容器定义一个方法creatLine，数据数组中自定义个一个属性selected，值为0或1，认定1的值为启用的line，0则是未启用。

3.二、建立完line容器以后就能够建立点位，定义一个方法叫createLineChild，在这个方法里就能够完整的写内部的具体样式。根据效果图仍是能很清晰看出单个line容器的布局仍是老三分，线路方案名称、点位内容和底部按钮。这里涉及到不少点击事件改变样式的问题，若是使用操做dom节点会特别麻烦，仍是要采用数据的思想，每个line对象上自定义一个属性active。标题下的选择框和底部按钮都用到了，启用区域点击选择框隐藏底部按钮，点击底部按钮即表明这个线路移入未启用区域，底部按钮背景图改变。

 

 

样式的改变用先定义好的方式，属性值改变就采用不一样的样式，这里就用到三元表达式，三元...还记得吗？

四、定义完每个line的样式，其中的content内容仍是空的，这还须要单独写一个方法createPoint，专门用来建立点位内容，效果图中看到一条线路上要在起始点和终点显示的文字内容不同，根据point数据数组下标来解决这个问题，当数据中元素下标为0就是第一条数据，给个样式名start，以此类推。

 

偶鸡儿KK，就这样吧，但难点远不止这些，还有不少点击事件也很复杂，对我来讲很复杂，决定专门写一篇总结那块内容吧。

本文分享自微信公众号 - 前端一块儿学（gh_3ba18d51f982）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。