编程 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使用手册之三 CSS操作

Mar 24 Javascript

javascript 支持ie和firefox杰奇翻页函数

Jul 22 Javascript

扩展jQuery 键盘事件的几个基本方法

Oct 30 Javascript

jquery 经典动画菜单效果代码

Jan 26 Javascript

js 内存释放问题

Apr 25 Javascript

jQuery1.6 正式版发布并提供下载

May 05 Javascript

jQuery提示插件alertify使用指南

Apr 21 Javascript

关于不同页面之间实现参数传递的几种方式讨论

Feb 13 Javascript

Vue+webpack项目基础配置教程

Feb 12 Javascript

bootstrap table实现合并单元格效果

Dec 24 Javascript

javascript 函数的暂停和恢复实例详解

Apr 25 Javascript

Element Input输入框的使用方法

Jul 26 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

咖啡知识咖啡养豆要养多久排气又是什么

2021/03/06 新手入门

PHP基于自定义函数实现的汉字转拼音功能实例

2017/09/30 PHP

Yii2框架配置文件(Application属性)与调试技巧实例分析

2019/05/27 PHP

laravel 解决paginate查询多个字段报错的问题

2019/10/22 PHP

PHP 计算两个时间段之间交集的天数示例

2019/10/24 PHP

什么是DOM(Document Object Model)文档对象模型

2012/03/05 Javascript

jquery win 7透明弹出层效果的简单代码

2013/08/06 Javascript

javascript trim函数在IE下不能用的解决方法

2014/09/12 Javascript

JavaScript onkeydown事件入门实例(键盘某个按键被按下)

2014/10/17 Javascript

JavaScript中连接操作Oracle数据库实例

2015/04/02 Javascript

JavaScript获取一个范围内日期的方法

2015/04/24 Javascript

javascript中的3种继承实现方法

2016/01/27 Javascript

详解数组Array.sort()排序的方法

2020/05/09 Javascript

jQuery轮播图实例详解

2018/08/15 jQuery

H5+C3+JS实现五子棋游戏（AI篇）

2020/05/28 Javascript

jQuery实现简单的Ajax调用功能示例

2019/02/15 jQuery

vue+Element实现搜索关键字高亮功能

2019/05/28 Javascript

微信小程序拼接图片链接无底洞深入探究

2019/09/03 Javascript

vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

2019/10/30 Javascript

Python查找相似单词的方法

2015/03/05 Python

Python 模拟购物车的实例讲解

2017/09/11 Python

python中datetime模块中strftime/strptime函数的使用

2018/07/03 Python

flask框架使用orm连接数据库的方法示例

2018/07/16 Python

Python爬虫之UserAgent的使用实例

2019/02/21 Python

Python Django搭建网站流程图解

2020/06/13 Python

乡镇干部先进事迹材料

2014/02/03 职场文书

庆元旦广播稿

2014/02/10 职场文书

社团活动总结怎么写

2014/06/30 职场文书

我的未来不是梦演讲稿

2014/09/02 职场文书

党支部反对四风思想汇报

2014/10/10 职场文书

2015年财务部年度工作总结

2015/05/19 职场文书

指导老师鉴定意见

2015/06/05 职场文书

关于办理居住证的介绍信模板

2019/11/27 职场文书

MongoDB使用profile分析慢查询的步骤

2021/04/30 MongoDB

前端JavaScript大管家 package.json

2021/11/02 Javascript

Golang jwt身份认证

2022/04/20 Golang