vue实现拖拽进度条的方法

本文将为大家详细介绍“Vue实现拖拽进度条的方法”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“vue实现拖拽进度条的方法”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

具体内容如下

组件代码：

<template> <div>  <div class="slider" ref="slider">   <div class="process" :></div>   <div class="thunk" ref="trunk" :>    <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>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;  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实现拖拽进度条的方法”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注编程网精选频道！