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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
9个实用的PHP代码片段分享
2015/01/22 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python日志处理模块logging用法解析
2020/05/19 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
信息总监管理职责范本
2014/03/08 职场文书
副董事长岗位职责
2014/04/02 职场文书
《赶海》教学反思
2014/04/20 职场文书
大专毕业生求职信
2014/07/05 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
英文慰问信
2015/02/14 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python