为大家精心挑选了 8 个漂亮的 Progress Bars 组件,并附上 GitHub 链接和 vue.js 代码示例,以及Vue3 快速深入全攻略。

1.easy-circular-progress

一个简单的循环进度组件,带有计数效果。

作者:dreambo8563

Github:https://github.com/dreambo8563/easy-circular-progress

2.vuejs-progress-bar

vue.js 专用的 ProgressBar,基于SVG 矢量图形。有直线、圆和圆柱 3 种模式:


作者:larsmars

Github:https://github.com/larsmars/vuejs-progress-bar

3.Vue Spinner Component

可自定义的轻量级旋转器图标组件。

你可以通过设置其属性来自定义颜色、大小、深度、旋转方向和速度等。所有的属性均具有默认值。你可以通过设置其状态来控制它的显示或隐藏。

Github:http://github.com/sergeyloysha/vue-spinner-component

4.VUE ARC COUNTER

该 Vue 组件在圆弧中生成计数器。其中角度、颜色、笔划宽度、虚线之间的间距以及方向都可以通过属性进行控制。

Github:https://github.com/snirp/vue-circle-counter

5.vue-simple-progress

简单灵活的进度条。vue-simple-progress 设计为轻量级的 Vue.js 进度条,只需要很少的配置就能使用。


Github:https://github.com/dzwillia/vue-simple-progress

6.vue-wait

Vue 和 Vuex 可用的多进程加载进度管理。该项目以前名为 vuex-loading。

vue-wait 能够帮你管理页面上的多个加载状态,而不会发生任何冲突。它基于一个“非常简单的想法”,可以管理具有多个加载状态的阵列(或可选的 Vuex 存储)。通过内置的加载组件侦听其注册的 loader 即可立即变为加载状态。

Github:http://github.com/f/vue-wait

7.vue-progress-path

支持自定义 SVG 路径的可自定义进度指示器和旋转器图标。

Github:http://github.com/Akryum/vue-progress-path

8.vue-simple-spinner

简单灵活的旋转器图标。vue-simple-spinner 设计为轻量级的 Vue.js 旋转器图标,需要的配置最少。

Github:http://github.com/dzwillia/vue-simple-spinner

9.Vue3 快速深入全攻略

Vue.js 作为现在的前端主流框架之一,在国内有着广泛的应用,也是面试几乎肯定问到的内容。如果能够看懂它的源码,熟悉它的各种使用技巧,肯定会对你的面试有极大的助益。

市场上的 Vue 教程非常多,基础课程占多数。如果你希望提高 Vue.js 水平,掌握更多的开发技能,可以看一下这个专题课 ——《 Vue3 快速深入全攻略》。

它是 Vue 高级教程,从 Vue 2 & Vue 3 核心 API 对比讲起,包括真实业务项目实战、核心源码分析,帮你全面理解 Vue 3 的实现原理,目标是帮助大家通过面试、拿到高薪。

课程大纲:

1.Vue2与Vue3 核心API对比

1-1 回顾10年内前端历史框架与Vue3的对比 了解前端技术理念前世今生

1-2 总结Options API 与 Composition API 优势劣势 如this指向等

1-3 总结Vue3新功能,如Fragments、portals、全局挂载 / 配置 API 等

2.Vue3真实业务项目实战

2-1 Composition API的部分实战使用技巧

2-2 从0带你使用Vue3+TypeScript实战小项目

2-3 Vue全家桶与Vue3配合使用上的技术变化细节

3.Vue3部分核心源码分析

3-1 Vue2与Vue3在整体文件结构和源码实现的区别

3-2 Vue Composition API 响应式包装对象原理

3-3 Rx.js原理与reactive API 原理、ref API 原理等与总结

本课程原价98元,微信扫描下面的二维码,添加好友领取优惠券, 

1元即可报名 ,仅限前50名添加(无套路)

Logo

前往低代码交流专区

更多推荐