编程 Javascript

Vue进度条progressbar组件功能

Posted in Javascript onApril 17, 2018

效果图

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

进度条组件

实现过程

◾ 项目搭建

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

Vue进度条progressbar组件功能

progressbar组件工作目录

◾ progressbar源文件之template

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

Vue进度条progressbar组件功能

progressbar源文件template部分

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

类型，利用type变量控制，例如有warning，danger，success，info等；
是否是动态，利用animate变量控制；
当前值，利用value变量控制；
最大值，利用max变量控制；
百分比，利用percent变量控制，这是通过value与max值计算出来的，为Vue的一个计算属性；
显示的百分比值，利用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组件的过程，希望能对大家有帮助。

Vue进度条progressbar组件功能

- Author -

enterlind

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

SUN的《AJAX与J2EE》全文译了

Feb 23 Javascript

广告切换效果(缓动切换)

May 27 Javascript

jquery ui dialog里调用datepicker的问题

Aug 06 Javascript

extjs DataReader、JsonReader、XmlReader的构造方法

Nov 07 Javascript

js简单实现删除记录时的提示效果

Dec 05 Javascript

JQUERY 设置SELECT选中项代码

Feb 07 Javascript

JavaScript里实用的原生API汇总

May 14 Javascript

js实现头像图片切割缩放及无刷新上传图片的方法

Jul 17 Javascript

js焦点文字滚动效果代码分享

Aug 25 Javascript

AngularJS 在同一个界面启动多个ng-app应用模块详解

Dec 20 Javascript

angularJs中$http获取后台数据的实例讲解

Aug 08 Javascript

将RGB值转换为灰度值的简单算法

Oct 09 Javascript

微信小程序如何像vue一样在动态绑定类名

Apr 17 #Javascript

Angular数据绑定机制原理

Apr 17 #Javascript

基于vue-ssr的静态网站生成器VuePress 初体验

Apr 17 #Javascript

jQuery实现使用sort方法对json数据排序的方法

Apr 17 #jQuery

jQuery+datatables插件实现ajax加载数据与增删改查功能示例

Apr 17 #jQuery

jQuery实现带右侧索引功能的通讯录示例【附源码下载】

Apr 17 #jQuery

Angular 容器部署的方法

Apr 17 #Javascript

You might like

PHP实现支持GET,POST,Multipart/form-data的HTTP请求类

2014/09/24 PHP

PHP实现多关键字加亮功能

2016/10/21 PHP

php 可变函数使用小结

2018/06/12 PHP

jQuery textarea的长度进行验证

2009/05/06 Javascript

用AJAX返回HTML片段中的JavaScript脚本

2010/01/04 Javascript

前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）

2010/03/04 Javascript

jquery png 透明解决方案(推荐)

2010/08/21 Javascript

JavaScript高级程序设计客户端存储学习笔记

2011/09/10 Javascript

你必须知道的Javascript知识点之"单线程事件驱动"的使用

2013/04/23 Javascript

Javascript基础_简单比较undefined和null 值

2016/06/14 Javascript

前端面试题及答案整理(二)

2016/08/26 Javascript

关于Node.js中Buffer的一些你可能不知道的用法

2017/03/28 Javascript

详解Vue用自定义指令完成一个下拉菜单（select组件）

2017/10/31 Javascript

jquery写出PC端轮播图实例

2018/01/26 jQuery

vue实现分页的三种效果

2020/06/23 Javascript

vue props default Array或是Object的正确写法说明

2020/07/30 Javascript

JavaScript 判断浏览器是否是IE

2021/02/19 Javascript

[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE

2014/05/22 DOTA

使用python加密自己的密码

2015/08/04 Python

Python爬虫实战：分析《战狼2》豆瓣影评

2018/03/26 Python

对Python w和w+权限的区别详解

2019/01/23 Python

python使用yield压平嵌套字典的超简单方法

2019/11/02 Python

python利用百度云接口实现车牌识别的示例

2020/02/21 Python

浅谈tensorflow模型保存为pb的各种姿势

2020/05/25 Python

Pycharm插件(Grep Console)自定义规则输出颜色日志的方法

2020/05/27 Python

使用 prometheus python 库编写自定义指标的方法(完整代码)

2020/06/29 Python

使用phonegap操作数据库的实现方法

2017/03/31 HTML / CSS

Html5原创俄罗斯方块（基于canvas）

2019/01/07 HTML / CSS

Yahoo-PHP面试题3

2012/01/14 面试题

高中毕业自我鉴定

2013/12/19 职场文书

农林环境专业求职信

2014/03/13 职场文书

英语邀请函范文

2015/02/02 职场文书

2015年公司后勤管理工作总结

2015/05/13 职场文书

2016年教育局“我们的节日——端午节”主题活动总结

2016/04/01 职场文书

正确使用MySQL update语句

2021/05/26 MySQL

「偶像大师 MILLION LIVE！」七尾百合子手办开订

2022/03/21 日漫