在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: '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中如何实现事件响应式进度条组件的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

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

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

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

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

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

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

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

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