自制简单的range（Vue）

废话不多说先上成果图

实现思路

主要分界面与逻辑两大块

界面分为5个部分

• 左滑块长度
• 左内容位置
• 中间长度
• 右滑块长度
• 右内容位置

逻辑

• touch3个事件
• 各滑块长度及位置计算
• 选中时变色

具体实现步骤

1. 首先我们明白整个容器的长度是不变的等于左边+中间+右边所以我们可以通过先获取总的容器的宽度并用变量进行保存,这里我用的就是屏幕的宽度。

this.rangeWidth = document.body.clientWidth

1. 添加vue的三种touch事件

@touchstart.stop.prevent="leftTextTouchStart" //按下 
@touchmove.stop.prevent="leftTextTouchMove" //滑动 
@touchend.stop.prevent="leftTextTouchEnd"  //松开//右滑块，同上 
@touchstart.stop.prevent="rightTextTouchStart" 
@touchmove.stop.prevent="rightTextTouchMove" 
@touchend