Vue组件库之进度条(progressbar)组件

最新推荐文章于 2024-06-09 10:01:24 发布
最新推荐文章于 2024-06-09 10:01:24 发布
阅读量3.4w 收藏 4
点赞数 1

效果图

首先我们看一下进度条组件运行出来的效果，如下图显示

我的Vue组件库之进度条(progressbar)组件

进度条组件

实现过程

  • 项目搭建

progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，生成的工作目录如下，其中各个文件夹的内容入之前的一篇文章一样

我的Vue组件库之进度条(progressbar)组件

progressbar组件工作目录

  • progressbar源文件之template

progressbar组件表现为.vue文件的形式，其中template部分内容如下

我的Vue组件库之进度条(progressbar)组件

progressbar源文件template部分

我们可以分析一下，progressbar组件主要有这几项属性：

  1. 类型，利用type变量控制，例如有warning，danger，success，info等；

  2. 是否是动态，利用animate变量控制；

  3. 当前值，利用value变量控制；

  4. 最大值，利用max变量控制；

  5. 百分比，利用percent变量控制，这是通过value与max值计算出来的，为Vue的一个计算属性；

  6. 显示的百分比值，利用valueText值控制，为Vue的一个计算属性

  • progressbar源文件之script

我的Vue组件库之进度条(progressbar)组件

progressbar组件的script部分

  • progressbar组件之style

其中style的部分内容比较多，首先看下基本的progressbar的css属性，包括progress和progress-bar的部分

我的Vue组件库之进度条(progressbar)组件

基本的css部分

然后看下表示不同颜色的css样式

我的Vue组件库之进度条(progressbar)组件

表示颜色的css样式

最后看下表示动画效果的css样式

我的Vue组件库之进度条(progressbar)组件

动画效果的css样式

  • 示例

在完成上述的步骤后，便可以完成一个progressbar组件，接下来看下progressbar组件的使用，如果能运行出来，就可以看到文章一开始的效果。

我的Vue组件库之进度条(progressbar)组件

progressbar组件的使用

总结

本文详细的介绍了编写progressbar组件的过程，希望能对大家有帮助。

enterlind
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
vue-circle-progress:vue圆形进度条,vue组件
05-23
vue-circle-progress vue圆形进度条组件，自由可定制 示例运行步骤 【下载依赖】npm install 【运行项目】npm run dev 【打开对应链接】浏览器打开对应链接 【设置top值示例】 源代码 /src/App.vue是使用圆形进度条组件的代码实例 组件源代码为circle-progress.vue，拷贝该文件，直接使用即可 使用方法如下 参数名 值类型 是否必填 参数作用 默认值 id String 选填 组件的id，多次定义设置不同的值 1 width Number 必填 设置圆整体的大小，单位为px 无 radius Number 必填 设置进度条宽度，单位为px 无 progress Number 必填 设置进度百分比 无 barColor String 必填 设置进度条颜色 无 backgroundColor String 必填 设置进度条背景颜色
Vue进度条progressbar组件功能
08-27
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具。这篇文章给大家介绍了Vue进度条progressbar组件
探索 Vue 进度条组件：vue-progress
gitblog_00029的博客
06-09 347
探索 Vue 进度条组件：vue-progress 项目地址:https://gitcode.com/wangdahoo/vue-progress 在前端开发中，进度条是提供实时反馈的重要元素，它能让用户了解任务的进行状态。今天，我们要介绍一个强大的 Vue 组件——vue-progress，将 Progressbar.js 功能无缝集成到 Vue 中，让你轻松创建各种类型的进度条。 项目介绍 v...
vue-ins-progress-bar 一款 ins 风格的 vue 页面加载进度条组件
赢是渺然一线，输才是常态 的博客
04-02 411
1 安装 npm i vue-ins-progress-bar 2 main.js import VueInsProgressBar from 'vue-ins-progress-bar' const options = { position: 'fixed', show: true, height: '3px' } Vue.use(VueInsProgressBar, options...
VUE3实用组件开发合集三：进度条组件
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
07-17 3270
VUE3实用组件开发合集三：进度条组件，包括源码，开发文档、素材等。 使用vue3开发实现各种进度条，正常进度条、圆形进度条、分步进度等各种进度条组件，并添加特定的样式效果。封装为组件，可直接调用，通过参数可指定样式、效果等。提供实例源码、开发过程视频及实现过程。.........
基于vue，自定义条形进度条/辣条进度条
weixin_44801678的博客
03-31 1848
第一种，悬浮选显示进度条，如果不需要悬浮可以 showTip为true，这样会导致菜单折叠进度条位置不变，如果悬浮显示就没有问题， <template> <div :style="{width:width+'px'}" class="processBox" @mouseover="showTip=true" @mouseleave="showTip=false" > <div :style="{width:width+'px'}" class="bgBox"&
推荐开源项目：Vue进度条组件 - vue-progressbar
gitblog_00086的博客
05-13 520
推荐开源项目：Vue进度条组件 - vue-progressbar 项目地址:https://gitcode.com/hilongjw/vue-progressbar 在这个日益注重用户体验的时代，一个优雅的加载进度条能够大大提升用户的满意度。【vue-progressbar】正是这样一个专为Vue.js设计的轻量级且高度可定制的进度条组件。它提供了一种简洁的方式来展示页面或数据加载的进度，从而使...
一起学Vue自定义组件之进度条
绳锯木断，水滴石穿，专心写文，无问西东！！！
08-24 5832
在日常开发中，随着需求的个性化，逻辑的复杂化，自定义组件也变得越来越常见，而且组件具有扩展性强，易复用，封装复杂的代码逻辑等优点，可以用小组件来构建大型应用系统。本文以一个简单的小例子，简述Vue进行组件开发的常见步骤，如有不足之处，还请指正。 涉及知识点 本文案例，不仅用到了之前的基础知识，如：v-if, 样式绑定，属性传值等，还用到了组件的特有知识，如下所示： 组件：可复用的Vue实例，具有封装，复用等特点。 Vue项目构建：一个vue后缀的文件，就表示一个组件。但是浏览器并不认识vue文件，所
vue中进度条写法_Vue进度条progressbar组件功能
weixin_42533243的博客
02-05 931
效果图首先我们看一下进度条组件运行出来的效果，如下图显示进度条组件实现过程◾ 项目搭建progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，生成的工作目录如下，其中各个文件夹的内容入之前的一篇文章一样progressbar组件工作目录◾ progressbar源文件之templateprogressbar组件表现为.vue文件的形...
Vue的事件响应式进度条组件实例详解
08-28
它是一个名为`ProgressBar`的Vue组件，接受一些props，如`leftBg`、`bgc`、`ballBgc`、`height`、`width`、`max`、`min`和`value`，用于设置进度条的样式和范围。在`data`方法中，我们看到了组件的状态，包括当前值`...
vue2.0实现音乐/视频播放进度条组件
12-03
1. 使用Vue的组件化思想，将进度条组件封装。 2. 通过监听触摸事件实现进度条的拖动和点击操作。 3. 利用`timeupdate`事件获取实时播放时间和总时长。 4. 使用`this.$emit()`向父组件传递进度信息。 5. 通过CSS样式...
手把手教你实现一个 Vue 进度条组件！
weixin_33857679的博客
11-16 1476
最近在个人的项目中，想对页面之间跳转的过程进行优化，想到了很多文档或 npm 等都用到的页面跳转进度条，于是便想自己去实现一个，特此记录。 来看下 npm 搜索组件时候的效果： so 下面咱们一起动手实现一下呗。 定义使用方式 想实现一个组件的前提，一定要想好你的需求是什么，还要自己去定义一个舒服的使用方法，这其中也是有原则的，对使用者来说，使用方式越简单越好。那么对应的代价就是写这个组件的复...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
Matlab实现斑点鬣狗优化算法SHO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
[毕设]HTTP服务器开发与设计.zip
最新发布
07-27
[毕设]HTTP服务器开发与设计
vue3 进度条组件 怎么通过弹框显示
06-01
首先，你需要在你的 Vue3 项目中安装一个进度条组件，例如 `vue-progressbar`。 然后，在你需要显示进度条的地方，你可以使用 `v-if` 和 `v-show` 指令来控制进度条的显示和隐藏。例如，你可以在弹框的组件中添加一个 `isShowingProgressBar` 的 data 属性来控制进度条的显示： ```html <template> <div> <button @click="showProgressBar">显示进度条</button> <div v-if="isShowingProgressBar"> <vue-progress-bar :progress="progress"></vue-progress-bar> </div> </div> </template> <script> import VueProgressBar from 'vue-progressbar'; export default { components: { VueProgressBar, }, data() { return { isShowingProgressBar: false, progress: 0, }; }, methods: { showProgressBar() { this.isShowingProgressBar = true; // 这里可以设置定时器更新进度条的 progress 值 setInterval(() => { this.progress += 10; if (this.progress >= 100) { this.isShowingProgressBar = false; this.progress = 0; } }, 1000); }, }, }; </script> ``` 在上面的代码中，我们使用了 `vue-progressbar` 组件来显示进度条，通过 `v-if` 指令控制进度条的显示与隐藏。我们还在 `showProgressBar` 方法中使用了定时器来模拟进度条的更新。 当点击“显示进度条”按钮时，进度条会显示，并且每隔一秒钟进度条的 progress 值增加 10，当 progress 值达到 100 时，进度条会隐藏，并将 progress 值重置为 0。 希望这个例子能够帮助你实现通过弹框显示进度条组件。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值