在vue中实现列线图

这次项目上有一个列线图的功能需要实现，暂时想到了两种方案。效果图如下：

列线图

方案一：根据选中滑块滑动距离，修改滑块的偏移量，实现滑块跟随滑动方向，进行移动，暂时只实现上下滑动，左右滑动的原理一样。

    在小球上添加三个事件@touchstart、@touchmove、@touchend，

    start：（1）获取滑块在当前位置相对于屏幕的垂直坐标：

            this.startData = parseInt(el.changedTouches[0].screenY)

                （2）获取父元素的位置，和滑块相对于父元素的距离

            let parent = this.$refs.rpn.getBoundingClientRect();

            let child = this.$refs.point.getBoundingClientRect();            

            let parentY = parent.y;  

            let childY = child.y;

            this.thisPoint = childY - parentY;

        move:(1)获取父元素的高度

             let parentHeight = parent.height;

                （2）获取子元素的高度

            let childHeight = child.height;

                （3）获取当前竖直方向的移动距离

            this.moveData = parseInt(el.changedTouches[0].screenY);

                （4）计算当前滑块距离项目父元素的位置

            let number = this.moveData - this.startData + this.thisPoint;

                （5）设置滑块的top值

            this.$refs.point.style.top = `${number}px`

                （6）需要注意不要让滑块超出父元素的高度，上下具体的偏移量，按照实际需求添加

        end：如果滑动到两条线之间，需要向下或者向上取对应的值，根据需求取对应的数值，从新计算top值，添加给滑块。

    方案二：使用input[type=range],修改input的默认样式：

                 input[type=range] {      

                    -webkit-appearance: none;     

                     color: rgba(0, 0, 0, 0);     

                     height: 0;   

                 }

                 input[type=range]:focus {   

                     outline: none;   

                 }

                input[type=range]:focus::-webkit-slider-runnable-track {      

                    background: rgba(0, 0, 0, 0);  

                 }

                input[type=range]::-webkit-slider-thumb {     

                     -webkit-appearance: none;    

                      height: 16px;   

                       width: 16px;     

                       border-radius: 50px;    

                      background: url('./img/[email protected]') no-repeat;   

                      background-size: 100% 100%;  

                       cursor: pointer;      /* margin-top: -3.5px; */     

                     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);    

                }