首页 web前端 js教程 在Vue中如何实现事件响应式进度条组件

在Vue中如何实现事件响应式进度条组件

Jun 07, 2018 pm 05:31 PM
vue 组件

这篇文章主要介绍了Vue的事件响应式进度条组件的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下

写在前面

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

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

效果图

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

首先是模板部分

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

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

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

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

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

js部分

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

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

export default {
  name: &#39;ProgressBar&#39;,
  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: {
     &#39;width&#39;: this.width,
    },
    pBarStyle: {
     &#39;backgroundColor&#39;: this.bgc,
     &#39;height&#39;: this.height,
    },
    leftStyle: {
     &#39;width&#39;: this.progressPercent + &#39;%&#39;,
     &#39;background&#39;: this.leftBg,
     &#39;height&#39;: this.height,
    },
    ballStyle: {
     &#39;backgroundColor&#39;: this.ballBgc,
     &#39;height&#39;: this.height,
     &#39;width&#39;: this.height,
     &#39;borderRadius&#39;: parseInt(this.height) / 2 + &#39;px&#39;,
     &#39;right&#39;: - parseInt(this.height) / 2 + &#39;px&#39;,
    },
    // 标记是否按下鼠标
    isMouseDownOnBall: false,
   }
  },
  computed: {
   progressPercent(){
    return (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100;
   },
   progressElement(){
    return this.$el.getElementsByClassName(&#39;progress&#39;)[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 + &#39;%&#39;;
     // 修改value
     this.pValue = this.pMin + decimal * (this.pMax - this.pMin);
     this.$emit(&#39;pbar-drag&#39;, 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 + &#39;%&#39;;
     // 修改value
     this.pValue = this.pMin + decimal * (this.pMax - this.pMin);
     this.$emit(&#39;pbar-seek&#39;, 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 + &#39;%&#39;;
   }
  },
  mounted(){
   // 数据验证
   if(this.max < this.min){
    console.error("max can&#39;t less than min !");
   }
   // 初始百分比
   this.leftStyle.width = (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100 + &#39;%&#39;;
  },
 }
登录后复制

安装、使用

地址

代码库地址在GitHub

安装、使用

npm install vue-draggable-progressbar --save
import progressBar from &#39;vue-draggable-progressbar&#39;
登录后复制

用例:

<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值和百分比值

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在jQuery中有关Dom元素使用方法?

在js中常用数组函数有哪些?

关于vue2.0中datepicker使用方法

以上是在Vue中如何实现事件响应式进度条组件的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue.js怎么引用js文件 vue.js怎么引用js文件 Apr 07, 2025 pm 11:27 PM

在 Vue.js 中引用 JS 文件的方法有三种:直接使用 &lt;script&gt; 标签指定路径;利用 mounted() 生命周期钩子动态导入;通过 Vuex 状态管理库进行导入。

vue中的watch怎么用 vue中的watch怎么用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 选项允许开发者监听特定数据的变化。当数据发生变化时,watch 会触发一个回调函数,用于执行更新视图或其他任务。其配置选项包括 immediate,用于指定是否立即执行回调,以及 deep,用于指定是否递归监听对象或数组的更改。

vue怎么给按钮添加函数 vue怎么给按钮添加函数 Apr 08, 2025 am 08:51 AM

可以通过以下步骤为 Vue 按钮添加函数:将 HTML 模板中的按钮绑定到一个方法。在 Vue 实例中定义该方法并编写函数逻辑。

vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

vue返回上一页的方法 vue返回上一页的方法 Apr 07, 2025 pm 11:30 PM

Vue.js 返回上一页有四种方法:$router.go(-1)$router.back()使用 &lt;router-link to=&quot;/&quot;&gt; 组件window.history.back(),方法选择取决于场景。

Vue 实现跑马灯/文字滚动效果 Vue 实现跑马灯/文字滚动效果 Apr 07, 2025 pm 10:51 PM

在 Vue 中实现跑马灯/文字滚动效果,可以使用 CSS 动画或第三方库。本文介绍了使用 CSS 动画的方法:创建滚动文本,用 &lt;div&gt; 包裹文本。定义 CSS 动画,设置 overflow: hidden、width 和 animation。定义关键帧,设置动画开始和结束时的 transform: translateX()。调整动画属性,如持续时间、滚动速度和方向。

vue懒加载什么意思 vue懒加载什么意思 Apr 07, 2025 pm 11:54 PM

在 Vue.js 中,懒加载允许根据需要动态加载组件或资源,从而减少初始页面加载时间并提高性能。具体实现方法包括使用 &lt;keep-alive&gt; 和 &lt;component is&gt; 组件。需要注意的是,懒加载可能会导致 FOUC(闪屏)问题,并且应该仅对需要懒加载的组件使用,以避免不必要的性能开销。

怎样查询vue的版本 怎样查询vue的版本 Apr 07, 2025 pm 11:24 PM

可以通过以下方法查询 Vue 版本:使用 Vue Devtools 在浏览器的控制台中查看“Vue”选项卡。使用 npm 运行“npm list -g vue”命令。在 package.json 文件的“dependencies”对象中查找 Vue 项。对于 Vue CLI 项目,运行“vue --version”命令。检查 HTML 文件中引用 Vue 文件的 &lt;script&gt; 标签中的版本信息。

See all articles