Vue进度条progressbar组件功能
更新时间：2018年04月17日 14:51:08 作者：enterlind
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具。这篇文章给大家介绍了Vue进度条progressbar组件
效果图
首先我们看一下进度条组件运行出来的效果，如下图显示
进度条组件
实现过程
◾ 项目搭建
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，生成的工作目录如下，其中各个文件夹的内容入之前的一篇文章一样
progressbar组件工作目录
◾ progressbar源文件之template
progressbar组件表现为.vue文件的形式，其中template部分内容如下
progressbar源文件template部分
我们可以分析一下，progressbar组件主要有这几项属性：
- 类型，利用type变量控制，例如有warning，danger，success，info等；
- 是否是动态，利用animate变量控制；
- 当前值，利用value变量控制；
- 最大值，利用max变量控制；
- 百分比，利用percent变量控制，这是通过value与max值计算出来的，为Vue的一个计算属性；
- 显示的百分比值，利用valueText值控制，为Vue的一个计算属性
◾ progressbar源文件之script
progressbar组件的script部分
◾ progressbar组件之style
其中style的部分内容比较多，首先看下基本的progressbar的css属性，包括progress和progress-bar的部分
基本的css部分
然后看下表示不同颜色的css样式
表示颜色的css样式
最后看下表示动画效果的css样式
动画效果的css样式
◾ 示例
在完成上述的步骤后，便可以完成一个progressbar组件，接下来看下progressbar组件的使用，如果能运行出来，就可以看到文章一开始的效果。
progressbar组件的使用
总结
本文详细的介绍了编写progressbar组件的过程，希望能对大家有帮助。
相关文章
这篇文章主要介绍了Vue select 绑定动态变量的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本文主要介绍了vue使用axios接收流文件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要讨论Vue data中随意改一个属性,视图都会更新吗?下面来自面试官的问题然后做i出的一个问题总结，具有一定的参考价值，需要的小伙伴可以参考一下2021-12-12
最近开始入坑前端mapbox地图,跟大家一起慢慢深入学习,下面这篇文章主要给大家介绍了关于vue项目中使用mapbox地图切换底图的详细教程,文中给出了详细的实例代码,需要的朋友可以参考下2023-04-04
这篇文章介绍了Vue路由vue-router的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
后台管理页面需要有登录系统，所以考虑做一下路由鉴权，这篇文章主要介绍了nuxt框架中路由鉴权之Koa和Session的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了如何在Vue项目中使用vuex问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
require是一个node方法，用于引入模块，JSON或本地文件，这篇文章主要介绍了vue中动态引入图片为什么要是require,需要的朋友可以参考下2022-10-10
我们在做项目的时候经常会遇到跨域的问题,下面这篇文章主要给大家介绍了关于Vite配置代理Proxy解决跨域问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
今天小编就为大家分享一篇快速解决Vue项目在IE浏览器中显示空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论