vue开发拖拽进度条滑动组件


Posted in Javascript onSeptember 21, 2019

分享一个最近写的进度条滑动组件,以前都是用jq写,学会了vue,尝试着拿vue来写觉得非常简单,代码复用性很强!

效果图如下:

vue开发拖拽进度条滑动组件

vue开发拖拽进度条滑动组件

调用组件如下:

<slider :min=0 :max=100 v-model = "per"></slider>
<template>
 <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>
</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);
  }
  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{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:#409eff}
 .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:.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:.6}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS date对象的减法处理实现代码
Dec 28 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
简单实现js轮播图效果
Jul 14 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
个人小程序接入支付解决方案
May 23 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 #Javascript
使用vue制作滑动标签
Sep 21 #Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 #Javascript
Vue插件之滑动验证码
Sep 21 #Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 #Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 #Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 #Javascript
You might like
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP常用数组函数介绍
2014/07/28 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python如何实现单链表的反转
2020/02/10 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
行政文员岗位职责
2013/11/08 职场文书
大一自我鉴定范文
2013/12/27 职场文书
新学期班主任寄语
2014/01/18 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
党支部考察意见范文
2015/06/02 职场文书
网吧温馨提示
2015/07/17 职场文书