Vue的事件响应式进度条组件实例详解


Posted in Javascript onFebruary 04, 2018

写在前面

找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理。即使做好了,将来需要修改外观,又是一番折腾。

基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处。

效果图

Vue的事件响应式进度条组件实例详解

以上就是可以利用本组件实现的一些效果,他们都能响应input和change两种事件。

首先是模板部分

认真看一下上图,怎么构造HTML模板还是需要一番考虑的,我也是改了好几次,最后定的这个结构。首先有一层外包div就不说了。然后外包div下面就一个class = 'progress'的div,这个div内部的div是表示进度条已划过部分(class="left"),class="left"这个div内部又包含一个表示div来表示我们可以拖动的滑块小球。

说一下好处,这样的结构,做出来的样式,在页面检查元素的时候,能够清晰看到每个div和页面上展示的部分是重合的。

如果你的进度条 表示整个长度的div、表示左半部分的div、表示滑块的div不是我这种嵌套结构,而是兄弟节点关系,你就得用样式做相对定位,让后两个兄弟节点上移,这样,检查元素的时候,进度条下面的其他组件的盒子就会浸透到进度条的区域。虽然用户不会检查元素,但是时间久了之后也不方便程序员自己观察,不是吗。

也就是说,我们都希望HTML结构表达的元素和检查元素的时候显示的每个元素的占位是一致的。这也算是对你的HTML结构是否构造合理的一个评价指标。

<template>
 <div class="progress-wrapper" :style="wrapStyle">
  <div class="progress" @mousedown="mousedownHandler" @mouseover="mouseoverHandler"
    @mousemove="mousemoveHandler" @mouseup="mouseupHandler" :style="pBarStyle">
   <div class="left" :style="leftStyle">
    <div class="ball" :style="ballStyle"></div>
   </div>
   <slot></slot>
  </div>
 </div>
</template>

js部分

对现在就有需求使用这个带事件的进度条的同学来说,看看这部分,可以帮助你自己修改、完善它。

而对于想要先试用该组件的同学,则可以先不看这部分,等你用到发现该组件功能不足的时候,再看这部分代码也不迟。

export default {
  name: 'ProgressBar',
  props: {
   leftBg: String,
   bgc: String,
   ballBgc: String,
   height: String,
   width: String,
   max: {
    type: Number,
    default: 100,
   },
   min: {
    type: Number,
    default: 0,
   },
   value: {
    type: Number,
    default: 36,
   },
  },
  data: function () {
   return {
    pValue: this.value,
    pMax: this.max,
    pMin: this.min,
    wrapStyle: {
     'width': this.width,
    },
    pBarStyle: {
     'backgroundColor': this.bgc,
     'height': this.height,
    },
    leftStyle: {
     'width': this.progressPercent + '%',
     'background': this.leftBg,
     'height': this.height,
    },
    ballStyle: {
     'backgroundColor': this.ballBgc,
     'height': this.height,
     'width': this.height,
     'borderRadius': parseInt(this.height) / 2 + 'px',
     'right': - parseInt(this.height) / 2 + 'px',
    },
    // 标记是否按下鼠标
    isMouseDownOnBall: false,
   }
  },
  computed: {
   progressPercent(){
    return (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100;
   },
   progressElement(){
    return this.$el.getElementsByClassName('progress')[0];
   },
  },
  methods: {
   mousedownHandler(e){
    if(e.which === 1){
     this.isMouseDownOnBall = true;
    }
   },
   mousemoveHandler(e){
    if(this.isMouseDownOnBall === true){
     // 修改进度条本身
     let decimal = (e.clientX - this.$el.offsetLeft) / this.progressElement.clientWidth;
     let percent = decimal * 100;
     this.leftStyle.width = percent + '%';
     // 修改value
     this.pValue = this.pMin + decimal * (this.pMax - this.pMin);
     this.$emit('pbar-drag', this.pValue, percent);
    }
   },
   mouseupHandler(e){
    if(this.isMouseDownOnBall){
     // 修改进度条本身
     let decimal = (e.clientX - this.$el.offsetLeft) / this.progressElement.clientWidth;
     let percent = decimal * 100;
     this.leftStyle.width = percent + '%';
     // 修改value
     this.pValue = this.pMin + decimal * (this.pMax - this.pMin);
     this.$emit('pbar-seek', this.pValue, percent);
     this.isMouseDownOnBall = false;
    }
   },
   mouseoverHandler(e){
    // 没有按左键进入进度条
    if(e.which === 0){
     this.isMouseDownOnBall = false;
    }
   }
  },
  watch: {
   max(cur, old){
    this.pMax = cur;
   },
   min(cur, old){
    this.pMin = cur;
   },
   value(cur, old){
    this.pValue = cur;
   },
   progressPercent(cur, old){
    this.leftStyle.width = cur + '%';
   }
  },
  mounted(){
   // 数据验证
   if(this.max < this.min){
    console.error("max can't less than min !");
   }
   // 初始百分比
   this.leftStyle.width = (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100 + '%';
  },
 }

安装、使用

地址

代码库地址在GitHub

安装、使用

npm install vue-draggable-progressbar --save
import progressBar from 'vue-draggable-progressbar'

用例:

<progress-bar ref="aa"></progress-bar>
<progress-bar width="40%" leftBg="greenyellow" bgc="#ccc" ballBgc="red"></progress-bar>
<progress-bar width="60%" leftBg="linear-gradient(to right, yellow, pink)" bgc="#ccc" ballBgc="red"></progress-bar>
<progress-bar width="80%" leftBg="yellow" bgc="#ccc" ballBgc="red" height="30px"></progress-bar>
<progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="rgba(255,0,0,0.2)" height="40px"></progress-bar>
<progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="red" :max="max" :value="value" :min="min"
    @pbar-drag="drag" @pbar-seek="seek"></progress-bar>

组件props

  • leftBg:进度条已划过部分背景色
  • bgc:进度条还未划过部分背景色
  • ballBgc:滑块背景色
  • width:进度条占父组件的宽度百分比,传百分比数值
  • height:进度条高度,传像素值
  • max:进度条最大值
  • min:最小值
  • value:当前值

事件

  • pbar-drag: 拖动进度条时触发,回传value值和百分比值
  • pbar-drag: 点击进度条某一位置时触发,回传value值和百分比值

总结

以上所述是小编给大家介绍的Vue的事件响应式进度条组件实例详解,希望对大家有所帮助,如果大家哟任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
详解React中的组件通信问题
Jul 31 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 #Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 #Javascript
彻底理解js面向对象之继承
Feb 04 #Javascript
vue里面父组件修改子组件样式的方法
Feb 03 #Javascript
vue中element组件样式修改无效的解决方法
Feb 03 #Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 #Javascript
Vue修改mint-ui默认样式的方法
Feb 03 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
基于vue实现分页效果
2017/11/06 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vuex实现的简单购物车功能示例
2019/02/13 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python实现年会抽奖程序
2019/01/22 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python是怎样处理json模块的
2020/07/16 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
一道Delphi面试题
2016/10/28 面试题
工作自我评价分享
2013/12/01 职场文书
技能竞赛活动方案
2014/02/21 职场文书
股东合作协议书
2014/04/14 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL