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源码看Vue.set()和this.$set()的相关知识,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。感兴趣的朋友跟随小编一起看看吧2018-08-08
element-ui表格合并span-method的实现方法
这篇文章主要介绍了element-ui表格合并span-method的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Vue使用Element实现增删改查+打包的步骤，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了vue实现el-select默认选择第一个或者第二个，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了Vue3中导航守卫结合Axios实现token认证机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
Canvas是HTML5中新增的元素,专门用来绘制图形,下面这篇文章主要给大家介绍了关于Vue使用Canvas生成随机大小且不重叠圆的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要为大家介绍了nextTick能否获取到最新dom原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue车牌号校验和银行校验实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应组件的代码块，需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了Vue完整版和runtime版的区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论