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

基于JQuery实现的类似购物商城的购物车

Dec 06 Javascript

如何使用JS获取IE上传文件路径(IE7,8)

Jul 08 Javascript

jquery $(this).attr $(this).val方法使用介绍

Oct 08 Javascript

JS图片切换的具体方法(带缩略图版)

Nov 12 Javascript

详解JavaScript的Polymer框架中的通知交互

Jul 29 Javascript

jQuery实现下滑菜单导航效果代码

Aug 25 Javascript

javascript数组去重方法分析

Dec 15 Javascript

JS正则表达式验证账号、手机号、电话和邮箱是否合法

Mar 08 Javascript

JavaScript设计模式之代理模式详解

Jun 09 Javascript

详解Angular的8个主要构造块

Jun 20 Javascript

javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】

Sep 28 Javascript

JS前端广告拦截实现原理解析

Feb 17 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上传apk后自动提取apk包信息的使用(示例下载)

2013/04/26 PHP

php绘图中显示不出图片的原因及解决

2014/03/05 PHP

Windows和Linux中php代码调试工具Xdebug的安装与配置详解

2014/05/08 PHP

ThinkPHP5分页paginate代码实例解析

2020/11/10 PHP

encode脚本和normal脚本混用的问题与解决方法

2007/03/08 Javascript

简单的jquery拖拽排序效果实现代码

2011/09/20 Javascript

javascript判断chrome浏览器的方法

2014/03/26 Javascript

JavaScript类型系统之正则表达式

2016/01/05 Javascript

JS实现队列与堆栈的方法

2016/04/21 Javascript

JavaScript截屏功能的实现代码

2017/07/28 Javascript

全选复选框JavaScript编写小结（附代码）

2017/08/16 Javascript

微信小程序 POST请求的实例详解

2017/09/29 Javascript

jquery.picsign图片标注组件实例详解

2018/02/02 jQuery

基于Vue实现拖拽效果

2018/04/27 Javascript

详解Vue+axios+Node+express实现文件上传(用户头像上传)

2018/08/10 Javascript

vue-rx的初步使用教程

2018/09/21 Javascript

详解vue-cli+es6引入es5写的js(两种方法)

2019/04/19 Javascript

Nuxt.js 静态资源和打包的操作

2020/11/06 Javascript

在Python中使用NLTK库实现对词干的提取的教程

2015/04/08 Python

Python基于动态规划算法解决01背包问题实例

2017/12/06 Python

python脚本实现验证码识别

2018/06/07 Python

python redis连接有序集合去重的代码

2019/08/04 Python

Python实现网页截图（PyQT5）过程解析

2019/08/12 Python

python next()和iter()函数原理解析

2020/02/07 Python

python2.7使用scapy发送syn实例

2020/05/05 Python

python如何从键盘获取输入实例

2020/06/18 Python

Pytorch 扩展Tensor维度、压缩Tensor维度的方法

2020/09/09 Python

Canal官网：巴西女性时尚品牌

2019/10/16 全球购物

什么是静态路由？什么是动态路由？各自的特点是什么？

2015/09/16 面试题

四种会话跟踪技术

2015/05/20 面试题

幼儿园庆六一活动方案

2014/03/06 职场文书

高中生班主任评语

2014/04/25 职场文书

2014年新教师工作总结

2014/11/08 职场文书

2014年流动人口工作总结

2014/11/26 职场文书

教师廉政准则心得体会

2016/01/20 职场文书

教师理论学习心得体会

2016/01/21 职场文书