vue实现拖拽进度条

本文实例为大家分享了vue实现拖拽进度条的具体代码，供大家参考，具体内容如下

组件代码：

template>
     div>
      div class="slider" ref="slider">
   div class="PRocess" :style="{
 width }
    ">
    /div>
   div class="thunk" ref="trunk" :style="{
 left }
    ">
        div class="block">
    /div>
        div class="tips">
         !-- span>
{
{
scale*100}
}
    /span>
     -->
         i class="fas fa-caret-down">
    /i>
        /div>
       /div>
      /div>
      div>
       button    @click="     () =>
 {
          this.PEr++;
     }
        "   >
        +/button   >
{
{
 per }
}
    %button    @click="     () =>
 {
          if (this.per >
 0) {
           this.per--;
      }
     }
        "   >
        -   /button>
      /div>
     /div>
    /template>
    script>
/* * min 进度条最小值 * max 进度条最大值 * v-model 对当前值进行双向绑定实时显示拖拽进度 * */export default {
 props: ["min", "max", "value"], data() {
  return {
   slider: null, //滚动条DOM元素   thunk: null, //拖拽DOM元素   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 disX = e.clientX;
   document.onmouSEMove = function (e) {
        // value, left, width    // 当value变化的时候，会通过计算属性修改left，width    // 拖拽的时候获取的新width    var newWidth = e.clientX - disX + 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);
        _this.$emIT("input", _this.per);
   }
    ;
   document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
   }
    ;
       return false;
  }
    ;
 }
, computed: {
  // 设置一个百分比，提供计算slider进度宽度和trunk的left值  // 对应公式为 当前值-最小值/最大值-最小值 = slider进度width / slider总width  // trunk left = slider进度width + trunk宽度/2  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";
   }
  }
,  left() {
   if (this.slider) {
        return (     this.slider.offsetWidth * this.scale -     this.thunk.offsetWidth / 2 +     "px"    );
   }
 else {
        return 0 + "px";
   }
  }
, }
,}
    ;
    /script>
    style>
.box {
     margin: 100px auto 0;
     width: 80%;
}
.clear:after {
     content: "";
     display: block;
     clear: both;
}
.slider {
     user-select: none;
     position: relative;
     margin: 20px 0;
     width: 400px;
     height: 10px;
     background: #e4e7ed;
     border-radius: 5px;
     cursor: pointer;
}
.slider .process {
     position: absolute;
     left: 0;
     top: 0;
     width: 112px;
     height: 10px;
     border-radius: 5px;
     background: #81b159;
}
.slider .thunk {
     position: absolute;
     left: 100px;
     top: -7px;
     width: 20px;
     height: 20px;
}
.slider .block {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 2px solid #409eff;
     background: rgba(255, 255, 255, 1);
     transition: 0.2s all;
}
.slider .tips {
     position: absolute;
     left: -7px;
     bottom: 30px;
     min-width: 15px;
     text-align: center;
     padding: 4px 8px;
     /* background: #000;
     */ border-radius: 5px;
     height: 24px;
     color: #fff;
}
.slider .tips i {
     position: absolute;
     margin-left: -5px;
     left: 50%;
     bottom: -9px;
     font-Size: 16px;
     color: #000;
}
.slider .block:hover {
     transform: scale(1.1);
     opacity: 0.6;
}
    /style>
    

调用：

template>
     slider :min="0" :max="100" v-model="per">
    /slider>
    /template>
    script>
    import slider From "@/components/slider";
export default {
 data() {
  return {
}
    ;
 }
, computed: {
  per: {
   get() {
        return 0;
   }
,   set(val) {
        console.LOG(val);
   }
,  }
, }
, components: {
 slider }
, mounted() {
}
, methods: {
}
,}
    ;
    /script>
    style >
    /style>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• Vue实现圆环进度条的示例
• vue.js+ElementUI实现进度条提示密码强度效果
• vue页面加载时的进度条功能(实例代码)
• 环形加载进度条封装（Vue插件版和原生js版）
• vue配置nprogress实现页面顶部进度条
• Vue使用NProgress进度条的方法
• vue项目实现文件下载进度条功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！