编程 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 内存释放问题

Apr 25 Javascript

jQuery 一个图片切换的插件

Oct 09 Javascript

Javascript中Array.prototype.map()详解

Oct 22 Javascript

常用jQuery代码分享

Jul 14 Javascript

轻松掌握JavaScript享元模式

Aug 27 Javascript

JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】

Feb 14 Javascript

JS简单判断字符在另一个字符串中出现次数的2种常用方法

Apr 20 Javascript

javascript实现二叉树的代码

Jun 08 Javascript

vue项目使用.env文件配置全局环境变量的方法

Oct 24 Javascript

Vue学习笔记之计算属性与侦听器用法

Dec 07 Javascript

微信小程序学习总结（一）项目创建与目录结构分析

Jun 04 Javascript

JavaScript 生成唯一ID的几种方式

Feb 19 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

美图秀秀web开放平台--PHP流式上传和表单上传示例分享

2014/06/22 PHP

php实现将HTML页面转换成word并且保存的方法

2016/10/14 PHP

使用 PHP Masked Package 屏蔽敏感数据的实现方法

2019/10/15 PHP

PHP PDO和消息队列的个人理解与应用实例分析

2019/11/25 PHP

JavaScript Array扩展实现代码

2009/10/14 Javascript

Javascript new关键字的玄机以及其它

2010/08/25 Javascript

js String对象中常用方法小结(字符串操作)

2012/01/27 Javascript

JS获取select的value和text值的简单实例

2014/02/26 Javascript

javascript设置连续两次点击按钮时间间隔的方法

2014/10/28 Javascript

jQuery实现的超酷苹果风格图标滑出菜单效果代码

2015/09/16 Javascript

javascript省市级联功能实现方法实例详解

2015/10/20 Javascript

jquery中实现时间戳与日期相互转换

2016/04/12 Javascript

jQuery实现鼠标滑过预览图片大图效果的方法

2017/04/26 jQuery

NodeJs安装npm包一直失败的解决方法

2017/04/28 NodeJs

Vue实现双向数据绑定

2017/05/03 Javascript

关于vue.js v-bind 的一些理解和思考

2017/06/06 Javascript

深入理解Vue.js源码之事件机制

2017/09/27 Javascript

Node.js net模块功能及事件监听用法分析

2019/01/05 Javascript

JS数组方法concat()用法实例分析

2020/01/18 Javascript

Python脚本实现下载合并SAE日志

2015/02/10 Python

Python文件操作基本流程代码实例

2017/12/11 Python

python selenium 弹出框处理的实现

2019/02/26 Python

python解析xml简单示例

2019/06/21 Python

Opencv+Python识别PCB板图片的步骤

2021/01/07 Python

详解rem 适配布局

2018/10/31 HTML / CSS

HTML5新特性之用SVG绘制微信logo

2016/02/03 HTML / CSS

2014法制宣传日活动总结

2014/07/09 职场文书

法院四风对照检查材料思想汇报

2014/10/06 职场文书

十八大标语口号

2014/10/09 职场文书

开展批评与自我批评发言材料

2014/10/17 职场文书

个人存款证明书

2014/10/18 职场文书

2014工程部年度工作总结

2014/12/17 职场文书

2015年库房工作总结

2015/04/30 职场文书

政工师工作总结2015

2015/05/26 职场文书

面试分析分布式架构Redis热点key大Value解决方案

2022/03/13 Redis

win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法

2022/08/05 数码科技