分享一个最近写的进度条滑动组件，以前都是用日本季刊日本季刊写，学会了vue，尝试着拿某视频剪辑软件来写觉得非常简单，代码复用性很强！

效果图如下：

调用组件如下：

滑块：min=0 : max=100v-model=' per '/slidertemplate div class=' slider ' ref=' slider ' div class=' process ' : style=' { width } '/div class=' thunk ' ref=' trunk ' : style=' { left } ' div class=' block '/div class=' tips ' span { { scale * 100 } }/span I class=' Fas-fa-caret-down '/I进度条最小值*最大进度条最大值* v型对当前值进行双向绑定实时显示拖拽进度* */导出默认值{ prop :[' min '，' max '，' value']，data(){ return{ slider:null，//滚动条数字正射影像图元素thunk:null，//拖拽数字正射影像图元素根据： thi。值，//当前值} }, //渲染到页面的时候mounted () { this.slider=this .$ refs.sliderthis.thunk=this .$ refs.trunkvar _ this=thisthis。铛。onmousedown=function(e){ var width=ParSeint(_ this)。宽度)；var disX=e.clientXdocument。onmousemove=函数(e){//value，left，width //当价值变化的时候，会通过计算属性修改左侧，宽度/拖拽的时候获取的新width var新宽度=e . client x-DIsX宽度；//拖拽的时候得到新的百分比var scale=新宽度/_ this。滑块。偏移；_这个。per=数学。ceil((_ this。max-_这个。最小值)*缩放此值。min)；_this.per=Math.max(_this.per，_this。min)；_this.per=Math.min(_this.per，_this。max)；}文档。onmouseup=function(){ document。onmousemove=document。onmouseup=null}返回false} }，computed:{ //设置一个百分比，提供计算滑块进度宽度和树干的左边的值//对应公式为当前值-最小值/最大值-最小值=滑块进度宽度/滑块总宽度//躯干左侧=滑块进度宽度主干宽度/2 scale(){ return(this。这个。min)/(这个。麦克斯这个。min)；}，width(){ if(this。滑块){返回这个。滑块。在这个中间。刻度“px”；}else{ return 0 'px' } }，left(){ if(this。滑块){返回这个。滑块。除此之外。scale-this.thunk.offsetWidth/2“px”；}else{ return 0 'px' } } }，}/scriptstyle .box { margin :100 px auto 0；{内容3: }之后的宽度：80% }。清除：显示：块；clear:both} .滑块{位置：相对；余量：20 px 0；宽度宽度：400像素宽度：10像素背景技术： # e4e 7 ed边界半径：5像素；光标：指针} .滑块进程{ position : absolute eleft :0 top:0宽度宽度：112像素宽度：10像素边界半径：5像素；背景：#409eff} .滑块thunk { position : absolute eleft :100 pxtop :-7px；宽度：20 px高度：20px} .滑块。块{宽度：20像素高度：20 px边界半径：50%;border:2px固体# 409eff背景技术：rgba(255，255，255，1)；transition:2s all } .滑块tips { position : absolute eleft :-7px；底部：30像素最小宽度：15 px文本对齐：居中；padding:4px 8px背景技术： # 000;边界半径：5像素；height:24pxcolor:#fff} .滑块提示i { position:absolute左边距：-5px；左侧：50%;底部：-9px；font-size :16 pxcolor:#000} .滑块。框：悬停{变换：比例(1.1)；opa city 3360.6 }/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。