vue开发拖拽进度条滑动组件

vue开发拖拽进度条滑动组件开发拖拽进度条滑动组件

主要为大家详细介绍了vue开发拖拽进度条滑动组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

分享一个最近写的进度条滑动组件，以前都是用jq写，学会了vue，尝试着拿vue来写觉得非常简单，代码复用性很强！

效果图如下：

调用组件如下：

<slider :min=0 :max=100 v-model = "per"></slider>

<template>

<div class="slider" ref="slider">

</div>

</div>

</div>

</template>

<script>

/*

* min 进度条最小值

* max 进度条最大值

* v-model 对当前值进行双向绑定实时显示拖拽进度

* */

per:this.value, //当前值

}

},

//渲染到页面的时候

mounted () {

this.slider = this.$refs.slider;

this.thunk = this.$refs.trunk;

var _this = this;

this.thunk.onmousedown = function (e) {

var width = parseInt(_this.width);

// 拖拽的时候得到新的百分比

var scale = newWidth / _this.slider.offsetWidth;

_this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);

_this.per = Math.max(_this.per,_this.min);

_this.per = Math.min(_this.per,_this.max);

}

document.onmouseup = function(){

document.onmousemove = document.onmouseup = null;

}

return false;

scale(){

return (this.per - this.min) / (this.max - this.min);

},

width(){

if(this.slider){

return this.slider.offsetWidth * this.scale + 'px';

}else{

return 0 + 'px'

}

},