编程 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 相关文章推荐

用javascript实现的支持lrc歌词的播放器

May 17 Javascript

javascript delete 使用示例代码

Mar 29 Javascript

firefox火狐浏览器与与ie兼容的2个问题总结

Jul 20 Javascript

jQuery UI Dialog控件中的表单无法正常提交的解决方法

Dec 19 Javascript

页面回到顶部的三种实现(锚标记，js)

Oct 01 Javascript

jquery中插件实现自动添加用户的具体代码

Nov 15 Javascript

jQuery中prev()方法用法实例

Jan 08 Javascript

Javascript中For In语句用法实例

May 14 Javascript

JavaScript获取图片像素颜色并转换为box-shadow显示

Mar 11 Javascript

Angular在一个页面中使用两个ng-app的方法

Feb 20 Javascript

JavaScript正则替换HTML标签功能示例

Mar 02 Javascript

js canvas实现橡皮擦效果

Dec 20 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

apache+php完美解决301重定向的两种方法

2011/06/08 PHP

大家须知简单的php性能优化注意点

2016/01/04 PHP

laravel 如何实现引入自己的函数或类库

2019/10/15 PHP

纯CSS打造的导航菜单(附jquery版)

2010/08/07 Javascript

异步动态加载js与css文件的js代码

2013/09/15 Javascript

js中this的用法实例分析

2015/01/10 Javascript

基于Arcgis for javascript实现百度地图ABCD marker的效果

2015/09/12 Javascript

js读取并解析JSON类型数据的方法

2015/11/14 Javascript

js随机生成26个大小写字母

2016/02/12 Javascript

通过sails和阿里大于实现短信验证

2017/01/04 Javascript

jQuery实现级联下拉框实战（5）

2017/02/08 Javascript

JavaScript数据结构之二叉树的查找算法示例

2017/04/13 Javascript

前端主流框架vue学习笔记第一篇

2017/07/26 Javascript

详解VUE 对element-ui中的ElTableColumn扩展

2018/03/28 Javascript

npm scripts 使用指南详解

2018/10/08 Javascript

对TypeScript库进行单元测试的方法

2019/07/18 Javascript

在vue-cli 3中给stylus、sass样式传入共享的全局变量

2019/08/12 Javascript

JS实现音乐导航特效

2020/01/06 Javascript

云服务器部署Node.js项目的方法步骤(小白系列)

2020/03/23 Javascript

vue循环中点击选中再点击取消(单选)的实现

2020/09/10 Javascript

[16:21]教你分分钟做大人：圣堂刺客

2014/12/03 DOTA

[01:01]青春无憾，一战成名——DOTA2全国高校联赛开启

2018/02/25 DOTA

python实现每次处理一个字符的三种方法

2014/10/09 Python

Python环境变量设置方法

2016/08/28 Python

用virtualenv建立多个Python独立虚拟开发环境

2017/07/06 Python

numpy添加新的维度:newaxis的方法

2018/08/02 Python

python实现微信每日一句自动发送给喜欢的人

2019/04/29 Python

基于Tensorflow读取MNIST数据集时网络超时的解决方式

2020/06/22 Python

CSS3+Sprite实现僵尸行走动画特效源码

2016/01/27 HTML / CSS

中国包裹转运寄送国际服务：Famiboat

2019/07/24 全球购物

人力资源管理专业应届生求职信

2013/09/28 职场文书

公司清洁工岗位职责

2013/12/14 职场文书

平安建设实施方案

2014/03/19 职场文书

海洋科学专业求职信

2014/08/10 职场文书

单位计划生育责任书

2015/05/09 职场文书

详解Redis复制原理

2021/06/04 Redis