这篇文章主要介绍了vue的事件响应式进度条组件的实例代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下
写在前面
找了很多vue进度条组件，都不包含拖拽和点击事件，input range倒是原生包含input和change事件，但是直接基于input range做进度条的话，样式部分需要做大量调整和兼容性处理。即使做好了，将来需要修改外观，又是一番折腾。
基于以上两个原因，做了一个可以响应input和change事件（即一个是拖动进度条到某处，一个是在进度条某位置点击使其值变为该位置）的p实现的Vue组件，这样既满足了对进度条事件的需求，也带来了如有需求变动，样式修改很方便的好处。
效果图
立即学习“前端免费学习笔记（深入）”；
以上就是可以利用本组件实现的一些效果，他们都能响应input和change两种事件。
首先是模板部分
认真看一下上图，怎么构造HTML模板还是需要一番考虑的，我也是改了好几次，最后定的这个结构。首先有一层外包p就不说了。然后外包p下面就一个class = ‘progress’的p，这个p内部的p是表示进度条已划过部分（class=”left”），class=”left”这个p内部又包含一个表示p来表示我们可以拖动的滑块小球。
说一下好处，这样的结构，做出来的样式，在页面检查元素的时候，能够清晰看到每个p和页面上展示的部分是重合的。
如果你的进度条 表示整个长度的p、表示左半部分的p、表示滑块的p不是我这种嵌套结构，而是兄弟节点关系，你就得用样式做相对定位，让后两个兄弟节点上移，这样，检查元素的时候，进度条下面的其他组件的盒子就会浸透到进度条的区域。虽然用户不会检查元素，但是时间久了之后也不方便程序员自己观察，不是吗。
也就是说，我们都希望HTML结构表达的元素和检查元素的时候显示的每个元素的占位是一致的。这也算是对你的HTML结构是否构造合理的一个评价指标。
登录后复制
js部分
对现在就有需求使用这个带事件的进度条的同学来说，看看这部分，可以帮助你自己修改、完善它。
而对于想要先试用该组件的同学，则可以先不看这部分，等你用到发现该组件功能不足的时候，再看这部分代码也不迟。
export default { name: 'ProgressBar', props: { leftBg: String, bgc: String, ballBgc: String, height: String, width: String, max: { type: Number, default: 100, }, min: { type: Number, default: 0, }, value: { type: Number, default: 36, }, }, data: function () { return { pValue: this.value, pMax: this.max, pMin: this.min, wrapStyle: { 'width': this.width, }, pBarStyle: { 'backgroundColor': this.bgc, 'height': this.height, }, leftStyle: { 'width': this.progressPercent + '%', 'background': this.leftBg, 'height': this.height, }, ballStyle: { 'backgroundColor': this.ballBgc, 'height': this.height, 'width': this.height, 'borderRadius': parseInt(this.height) / 2 + 'px', 'right': - parseInt(this.height) / 2 + 'px', }, // 标记是否按下鼠标 isMouseDownOnBall: false, } }, computed: { progressPercent(){ return (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100; }, progressElement(){ return this.$el.getElementsByClassName('progress')[0]; }, }, methods: { mousedownHandler(e){ if(e.which === 1){ this.isMouseDownOnBall = true; } }, mousemoveHandler(e){ if(this.isMouseDownOnBall === true){ // 修改进度条本身 let decimal = (e.clientX - this.$el.offsetLeft) / this.progressElement.clientWidth; let percent = decimal * 100; this.leftStyle.width = percent + '%'; // 修改value this.pValue = this.pMin + decimal * (this.pMax - this.pMin); this.$emit('pbar-drag', this.pValue, percent); } }, mouseupHandler(e){ if(this.isMouseDownOnBall){ // 修改进度条本身 let decimal = (e.clientX - this.$el.offsetLeft) / this.progressElement.clientWidth; let percent = decimal * 100; this.leftStyle.width = percent + '%'; // 修改value this.pValue = this.pMin + decimal * (this.pMax - this.pMin); this.$emit('pbar-seek', this.pValue, percent); this.isMouseDownOnBall = false; } }, mouseoverHandler(e){ // 没有按左键进入进度条 if(e.which === 0){ this.isMouseDownOnBall = false; } } }, watch: { max(cur, old){ this.pMax = cur; }, min(cur, old){ this.pMin = cur; }, value(cur, old){ this.pValue = cur; }, progressPercent(cur, old){ this.leftStyle.width = cur + '%'; } }, mounted(){ // 数据验证 if(this.max 安装、使用
地址
代码库地址在GitHub
安装、使用
npm install vue-draggable-progressbar --saveimport progressBar from 'vue-draggable-progressbar'
登录后复制
用例：
登录后复制
组件props
leftBg：进度条已划过部分背景色
bgc：进度条还未划过部分背景色
ballBgc：滑块背景色
width：进度条占父组件的宽度百分比，传百分比数值
height：进度条高度，传像素值
max：进度条最大值
min：最小值
value：当前值
事件
pbar-drag: 拖动进度条时触发，回传value值和百分比值
pbar-drag: 点击进度条某一位置时触发，回传value值和百分比值
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在jQuery中有关Dom元素使用方法？
在jQuery中有关Dom元素使用方法？
在jQuery中有关Dom元素使用方法？
以上就是在Vue中如何实现事件响应式进度条组件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3187116.html
