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

很好用的js日历算法详细代码

Mar 07 Javascript

早该知道的7个JavaScript技巧

Mar 27 Javascript

jquery中邮箱地址 URL网站地址正则验证实例代码

Sep 15 Javascript

jQuery实现公告文字左右滚动的实例代码

Oct 29 Javascript

javascript内置对象操作详解

Feb 04 Javascript

JavaScript中的pow()方法使用详解

Jun 15 Javascript

javascript日期处理函数，性能优化批处理

Sep 06 Javascript

JS实现侧边栏鼠标经过弹出框+缓冲效果

Mar 29 Javascript

gulp教程_从入门到项目中快速上手使用方法

Sep 14 Javascript

解决vue多个路由共用一个页面的问题

Mar 12 Javascript

vue2.0 自定义组件的方法（vue组件的封装）

Jun 05 Javascript

Vue+Bootstrap收藏（点赞）功能逻辑与具体实现

Oct 22 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

将文件夹压缩成zip文件的php代码

2009/12/14 PHP

PHP备份/还原MySQL数据库的代码

2011/01/06 PHP

PHP中常用的转义函数

2014/02/28 PHP

php 邮件发送问题解决

2014/03/22 PHP

PHP实现根据图片色界在不同位置加水印的方法

2015/08/08 PHP

php将print_r处理后的数据还原为原始数组的解决方法

2016/11/02 PHP

PHP使用反向Ajax技术实现在线客服系统详解

2019/07/01 PHP

sina的lightbox效果。

2007/01/09 Javascript

JavaScript中出现乱码的处理心得

2009/12/24 Javascript

用JQuery实现全选与取消的两种简单方法

2014/02/22 Javascript

js实现浏览器窗口大小被改变时触发事件的方法

2015/02/02 Javascript

jquery html动态添加的元素绑定事件详解

2016/05/24 Javascript

浅谈React 属性和状态的一些总结

2016/11/21 Javascript

关于Mac下安装nodejs、npm和cnpm的教程

2018/04/11 NodeJs

angular4笔记系列之内置指令小结

2018/11/09 Javascript

Node.js console控制台简单用法分析

2019/01/04 Javascript

基于layui实现高级搜索（筛选）功能

2019/07/26 Javascript

微信小程序实现pdf、word等格式文件上传的方法

2019/09/10 Javascript

ES6使用 Array.includes 处理多重条件用法实例分析

2020/03/02 Javascript

学前端,css与javascript重难点浅析

2020/06/11 Javascript

基于Web Audio API实现音频可视化效果

2020/06/12 Javascript

jQuery 实现DOM元素拖拽交换位置的实例代码

2020/07/14 jQuery

Vue实现穿梭框效果

2020/09/30 Javascript

[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场

2018/04/05 DOTA

Python实现XML文件解析的示例代码

2018/02/05 Python

windows下安装Python的XlsxWriter模块方法

2018/05/03 Python

caffe binaryproto 与 npy相互转换的实例讲解

2018/07/09 Python

在scrapy中使用phantomJS实现异步爬取的方法

2018/12/17 Python

简单了解python的内存管理机制

2019/07/08 Python

使用phonegap获取设备的一些信息方法

2017/03/31 HTML / CSS

MATCHESFASHION.COM法国官网：英国奢侈品零售商

2018/01/04 全球购物

英国品牌男装折扣网站：Brown Bag

2018/03/08 全球购物

简述安装Slackware Linux系统的过程

2012/05/08 面试题

《小壁虎借尾巴》教学反思

2014/02/16 职场文书

人力资源管理专业自荐书

2014/07/07 职场文书

趣味运动会加油词

2015/07/18 职场文书