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 相关文章推荐
jQuery select操作控制方法小结
May 26 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
JavaScript实现网页计算器功能
Oct 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和ACCESS写聊天室(六)
2006/10/09 PHP
php学习 函数 课件
2008/06/15 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php中final关键字用法分析
2016/12/07 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
python删除文件示例分享
2014/01/28 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
高三毕业生自我鉴定
2013/12/20 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
初中班长竞选稿
2015/11/20 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python