地址：https://github.com/lizhongzhen11/myStudy/tree/master/vue

      最近有点闲，被拉过去用vue对一老项目进行重构开发。
      当然，主要是我师傅在弄，看我太闲了顺带上我。
      不过还是要感谢下，毕竟只有不断地去做才能更加清醒的认识到自己的不足。
      主要做了两件事,一个是开发一个带渐变色的进度条，一个就是动态添加/删除输入框之类的。一开始进度条让我搞了两天，至于动态添加/删除有点拖着，然后发现师傅写好了一个，仔细研究代码才发现还是有点道道的。

一、进度条

      项目采用的是iview框架,该ui框架是自带进度条的,其实该框架的这种简洁的进度条与整个框架风格相统一,挺好的。但是我司ui设计了带渐变色的进度条,而且进度条上的小球颜色也要不同,师傅还让我做成组件。。。
      谈到渐变,肯定想到CSS渐变效果,这个是没有问题的。但是,我一开始以为直接在一个进度条框上进行css渐变效果就可以达到比如80%渐变,剩下的20%保持背景色这种效果。也正是这样的想法,耽误了我很长时间,不停地找css如何让前80%渐变后20%颜色不变的方法。
      后来,没辙了,只好去某技术群里问大佬们,这里说明技术群还是必须的。大佬们一阵见血的说,你弄两个进度条div,一个设背景色,另一个css渐变然后通过定位移上去不就好了吗。
      我擦,真的是一针见血,思考方式完全不一样啊,我一直在死钻牛角尖,但其实换种思路这根本就不是问题了。开发不仅仅是敲代码,还要考虑设计思想。学到了。
      接下来,进度条肯定不是写死的,是根据时间日期来不断地变化的。所以在算时间定位这里也耗费了不少时间。

不过思路应该是一样的,先得到开始结束时间的时间跨度,然后拿当天时间与它们对比,在时间范围内的计算与开始时间的时间跨度,除以总跨度即可得到百分比从而确定位置。不过超过了结束时间,那么整个进度条完成;没到达开始时间,整个进度条默认颜色。

      在chrome浏览器测试正常后,突发奇想去试试兼容性,发现firefox完全没有进度条,全重叠在一起。百度了下才知道,是时间格式的问题。
      一开始我用的是2018-03-06的形式,chrome正常,但是！firefox进行时间相减时报NaN,只支持javascript官方时间构造器格式即2018/03/06.遂改成这种形式,解决了。
      至于改颜色,由于vue用的不多,磕磕绊绊的改好了,但也是写死的形式,没能达到师傅要求的传参改变颜色的形式。不过,接下来继续修改应该是可以达到的。

二、动态增删

      其实这里的一开始没想明白,后来想想通过v-for循环不就OK了吗。但是,这里有一个问题。
      由于该页面有两处增加/删除(分别对应父div和子div),这就造成了一个问题：当我增加一个父div时,然后增加第一个父div内部的子div,发现第二个父div里面的子div也跟着增加了。而且一个select改变选项时,其他所有子div内的select也跟着变。很明显,这是bug。
      解决方法也很巧妙,就是把父div里面需要用到的所有属性放到一个对象里面去,然后全局定义一个属性,值为数组类型的,把对象放进该数组内,然后对数组进行push和pop操作即可。
类似这样的：

1
2
3
4
5
6
7
8

condition_items: [
    {
        unit: '°C',
        condition: '温度',
        conditions: ['温度', '湿度', '阵雨量'],
        condition_index: 1
    }
],