编程 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小tip资料

Nov 23 Javascript

js去除空格的12种实用方法

Nov 08 Javascript

利用JS判断用户是否上网(连接网络)

Dec 23 Javascript

js语法学习之判断一个对象是否为数组

May 13 Javascript

js实时获取并显示当前时间的方法

Jul 31 Javascript

微信小程序实战之运维小项目

Jan 17 Javascript

Vue中使用sass实现换肤功能

Sep 07 Javascript

js设计模式之代理模式及订阅发布模式实例详解

Aug 15 Javascript

uploadify插件实现多个图片上传并预览

Sep 30 Javascript

Js图片点击切换轮播实现代码

Jul 27 Javascript

Node在Controller层进行数据校验的过程详解

Aug 28 Javascript

JS代码编译器Monaco使用方法

Jun 11 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架构及原理知识点详解

2019/12/22 PHP

php使用gearman进行任务分发操作实例详解

2020/02/26 PHP

js下关于onmouseout、事件冒泡的问题经验小结

2010/12/09 Javascript

JS版的date函数（和PHP的date函数一样）

2014/05/12 Javascript

js中匿名函数的创建与调用方法分析

2014/12/19 Javascript

javascript基于DOM实现省市级联下拉框的方法

2015/05/14 Javascript

jQuery常用且重要方法汇总

2015/07/13 Javascript

轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

2015/11/30 Javascript

HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

2016/05/25 Javascript

vue从使用到源码实现教程详解

2016/09/19 Javascript

如何提高数据访问速度

2016/12/26 Javascript

快速搭建vue2.0+boostrap项目的方法

2018/04/09 Javascript

mpvue将vue项目转换为小程序

2018/09/30 Javascript

基于vue实现移动端圆形旋钮插件效果

2018/11/28 Javascript

cocos2dx+lua实现橡皮擦功能

2018/12/20 Javascript

javascript实现手动点赞效果

2019/04/09 Javascript

JS数组Object.keys()方法的使用示例

2019/06/05 Javascript

基于layui的下拉列表的数据回显方法

2019/09/24 Javascript

JavaScript装饰者模式原理与用法实例详解

2020/03/09 Javascript

three.js显示中文字体与tween应用详析

2021/01/04 Javascript

Python操作mongodb的9个步骤

2018/06/04 Python

Python3使用PySynth制作音乐的方法

2019/09/09 Python

Python递归实现打印多重列表代码

2020/02/27 Python

在Ubuntu 20.04中安装Pycharm 2020.1的图文教程

2020/04/30 Python

利用python控制Autocad:pyautocad方式

2020/06/01 Python

JD Sports马来西亚：英国领先的运动鞋和运动服饰零售商

2018/03/13 全球购物

写好自荐信的技巧

2013/11/08 职场文书

大学生就业推荐信范文

2013/11/29 职场文书

物流专员岗位职责

2014/02/17 职场文书

廉洁自律承诺书

2014/03/27 职场文书

就业协议书的作用

2014/04/11 职场文书

幼师大班个人总结

2015/02/13 职场文书

2015年秋季运动会前导词

2015/07/20 职场文书

我的暑假生活作文（五年级）范文

2019/08/07 职场文书

班干部竞选演讲稿（精选5篇）

2019/09/24 职场文书

springboot读取resources下文件的方式详解

2022/06/21 Java/Android