vue实现拖拽进度条


Posted in Vue.js onMarch 01, 2021

本文实例为大家分享了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.js 相关文章推荐
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 #Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 #Vue.js
vue-router懒加载的3种方式汇总
Feb 28 #Vue.js
Vue SPA 首屏优化方案
Feb 26 #Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 #Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 #Vue.js
You might like
十天学会php之第二天
2006/10/09 PHP
PHP 数组入门教程小结
2009/05/20 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python自定义异常实例详解
2017/07/11 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
银行员工职业规划范文
2014/01/21 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
关于Vue中的options选项
2022/03/22 Vue.js