Vue的事件响应式进度条组件实例详解
写在前面
找了很多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结构是否构造合理的一个评价指标。
<template> <div class="progress-wrapper" :style="wrapstyle"> <div class="progress" @mousedown="mousedownhandler" @mouseover="mouseoverhandler" @mousemove="mousemovehandler" @mouseup="mouseuphandler" :style="pbarstyle"> <div class="left" :style="leftstyle"> <div class="ball" :style="ballstyle"></div> </div> <slot></slot> </div> </div> </template>
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 < this.min){ console.error("max can't less than min !"); } // 初始百分比 this.leftstyle.width = (this.pvalue - this.pmin) / (this.pmax - this.pmin) * 100 + '%'; }, }
安装、使用
地址
代码库地址在github
安装、使用
npm install vue-draggable-progressbar --save import progressbar from 'vue-draggable-progressbar'
用例:
<progress-bar ref="aa"></progress-bar> <progress-bar width="40%" leftbg="greenyellow" bgc="#ccc" ballbgc="red"></progress-bar> <progress-bar width="60%" leftbg="linear-gradient(to right, yellow, pink)" bgc="#ccc" ballbgc="red"></progress-bar> <progress-bar width="80%" leftbg="yellow" bgc="#ccc" ballbgc="red" height="30px"></progress-bar> <progress-bar leftbg="greenyellow" bgc="#ccc" ballbgc="rgba(255,0,0,0.2)" height="40px"></progress-bar> <progress-bar leftbg="greenyellow" bgc="#ccc" ballbgc="red" :max="max" :value="value" :min="min" @pbar-drag="drag" @pbar-seek="seek"></progress-bar>
组件props
- leftbg:进度条已划过部分背景色
- bgc:进度条还未划过部分背景色
- ballbgc:滑块背景色
- width:进度条占父组件的宽度百分比,传百分比数值
- height:进度条高度,传像素值
- max:进度条最大值
- min:最小值
- value:当前值
事件
- pbar-drag: 拖动进度条时触发,回传value值和百分比值
- pbar-drag: 点击进度条某一位置时触发,回传value值和百分比值
总结
以上所述是小编给大家介绍的vue的事件响应式进度条组件实例详解,希望对大家有所帮助,如果大家哟任何疑问欢迎给我留言,小编会及时回复大家的!
上一篇: Nano Server速记
下一篇: Koa2微信公众号开发之消息管理