编程 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 firefox兼容ie的dom方法脚本

May 18 Javascript

JavaScript Scoping and Hoisting 翻译

Jul 03 Javascript

Javascript Objects详解

Sep 04 Javascript

jQuery实现带分组数据的Table表头排序实例分析

Nov 24 Javascript

javascript瀑布流布局实现方法详解

Feb 17 Javascript

大型JavaScript应用程序架构设计模式

Jun 29 Javascript

VueJs单页应用实现微信网页授权及微信分享功能示例

Jul 26 Javascript

JS中数据结构之栈

Jan 01 Javascript

一文快速详解前端框架 Vue 最强大的功能

May 21 Javascript

微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

Aug 16 Javascript

js 将多个对象合并成一个对象 assign方法的实现

Sep 24 Javascript

vue实现列表拖拽排序的示例代码

Apr 08 Vue.js

微信小程序如何像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作的文本留言本的例子(三)

2006/10/09 PHP

PHP COOKIE设置为浏览器进程

2009/06/21 PHP

PHP中=赋值操作符对不同数据类型的不同行为

2011/01/02 PHP

浅析PHP Socket技术

2013/08/02 PHP

比较完整的微信开发php代码

2016/08/02 PHP

PHP中Static（静态）关键字功能与用法实例分析

2019/04/05 PHP

jquery中map函数与each函数的区别实例介绍

2014/06/23 Javascript

使用jQuery将多条数据插入模态框的实现代码

2014/10/08 Javascript

深入探寻javascript定时器

2015/01/02 Javascript

JS实现回到页面顶部动画效果的简单实例

2016/05/24 Javascript

PHP抓取HTTPS内容和错误处理的方法

2016/09/30 Javascript

node学习记录之搭建web服务器教程

2017/02/16 Javascript

H5手机端多文件上传预览插件

2017/04/21 Javascript

js删除对象中的某一个字段的方法实现

2021/01/11 Javascript

使用python检测主机存活端口及检查存活主机

2015/10/12 Python

Java多线程编程中ThreadLocal类的用法及深入

2016/06/21 Python

python虚拟环境的安装配置图文教程

2017/10/20 Python

[原创]教女朋友学Python（一）运行环境搭建

2017/11/29 Python

Python读取properties配置文件操作示例

2018/03/29 Python

python 将list转成字符串,中间用符号分隔的方法

2018/10/23 Python

python实现银联支付和支付宝支付接入

2019/05/07 Python

Python 读取串口数据,动态绘图的示例

2019/07/02 Python

Python 串口通信的实现

2020/09/29 Python

python中添加模块导入路径的方法

2021/02/03 Python

关于探究python中sys.argv时遇到的问题详解

2021/02/23 Python

澳大利亚最受欢迎的超级商场每日优惠：Catch

2020/11/17 全球购物

美术教学感言

2014/02/22 职场文书

小学生元旦感言

2014/02/26 职场文书

公司办公室岗位职责

2014/03/19 职场文书

领导干部民主生活会自我剖析材料范文

2014/09/20 职场文书

教师批评与自我批评总结

2014/10/16 职场文书

退学证明范本3篇

2014/10/29 职场文书

2014年青年志愿者工作总结

2014/12/09 职场文书

SQLServer中exists和except用法介绍

2021/12/04 SQL Server

mysql中数据库覆盖导入的几种方式总结

2022/03/25 MySQL

vue3.0 数字翻牌组件的使用方法详解

2022/04/20 Vue.js