Vue的事件响应式进度条组件实例详解

写在前面

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

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

效果图


首先是模板部分

认真看一下上图,怎么构造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的事件响应式进度条组件实例详解,希望对大家有所帮助,如果大家哟任何疑问欢迎给我留言,小编会及时回复大家的!

以上是 Vue的事件响应式进度条组件实例详解 的全部内容, 来源链接: utcz.com/z/319310.html

回到顶部