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实现坐标拾取器功能示例
Nov 18 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 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
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
python控制台中实现进度条功能
2015/11/10 Python
在Python中表示一个对象的方法
2019/06/25 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Pycharm小白级简单使用教程
2020/01/08 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
十佳少先队员演讲稿
2014/09/12 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
社团个人总结范文
2015/03/05 职场文书
欠款起诉书范文
2015/05/19 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
环保守法证明
2015/06/24 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
python process模块的使用简介
2021/05/14 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
MySQL中order by的使用详情
2021/11/17 MySQL