写在前面

创新互联公司专注于企业全网营销推广、网站重做改版、团风网站定制设计、自适应品牌网站建设、H5建站、购物商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为团风等各大城市提供网站开发制作服务。

找了很多vue进度条组件，都不包含拖拽和点击事件，input range倒是原生包含input和change事件，但是直接基于input range做进度条的话，样式部分需要做大量调整和兼容性处理。即使做好了，将来需要修改外观，又是一番折腾。

基于以上两个原因，做了一个可以响应input和change事件（即一个是拖动进度条到某处，一个是在进度条某位置点击使其值变为该位置）的div实现的Vue组件，这样既满足了对进度条事件的需求，也带来了如有需求变动，样式修改很方便的好处。

效果图

以上就是可以利用本组件实现的一些效果，他们都能响应input和change两种事件。

首先是模板部分

认真看一下上图，怎么构造HTML模板还是需要一番考虑的，我也是改了好几次，最后定的这个结构。首先有一层外包div就不说了。然后外包div下面就一个class = 'progress'的div，这个div内部的div是表示进度条已划过部分（class="left"），class="left"这个div内部又包含一个表示div来表示我们可以拖动的滑块小球。

说一下好处，这样的结构，做出来的样式，在页面检查元素的时候，能够清晰看到每个div和页面上展示的部分是重合的。

如果你的进度条 表示整个长度的div、表示左半部分的div、表示滑块的div不是我这种嵌套结构，而是兄弟节点关系，你就得用样式做相对定位，让后两个兄弟节点上移，这样，检查元素的时候，进度条下面的其他组件的盒子就会浸透到进度条的区域。虽然用户不会检查元素，但是时间久了之后也不方便程序员自己观察，不是吗。

也就是说，我们都希望HTML结构表达的元素和检查元素的时候显示的每个元素的占位是一致的。这也算是对你的HTML结构是否构造合理的一个评价指标。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：Vue的事件响应式进度条组件实例详解-创新互联
网站地址：http://chengdu.cdxwcx.cn/article/ccccdi.html