Vue进度条progressbar组件功能


Posted in Javascript onApril 17, 2018

效果图

首先我们看一下进度条组件运行出来的效果,如下图显示

Vue进度条progressbar组件功能

进度条组件

实现过程

◾ 项目搭建

progressbar组件在一个可以直接运行的npm包,通过Yeoman进行构建,再通过Gulp+Webpack构建工具,生成的工作目录如下,其中各个文件夹的内容入之前的一篇文章一样

Vue进度条progressbar组件功能

progressbar组件工作目录

◾ progressbar源文件之template

progressbar组件表现为.vue文件的形式,其中template部分内容如下

Vue进度条progressbar组件功能

progressbar源文件template部分

我们可以分析一下,progressbar组件主要有这几项属性:

  1. 类型,利用type变量控制,例如有warning,danger,success,info等;
  2. 是否是动态,利用animate变量控制;
  3. 当前值,利用value变量控制;
  4. 最大值,利用max变量控制;
  5. 百分比,利用percent变量控制,这是通过value与max值计算出来的,为Vue的一个计算属性;
  6. 显示的百分比值,利用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组件的过程,希望能对大家有帮助。

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
js loading加载效果实现代码
Nov 24 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
vue地区选择组件教程详解
May 04 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
php批量修改表结构实例
2017/05/24 PHP
php实现的顺序线性表示例
2019/05/04 PHP
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
vue 过滤器filter实例详解
2018/03/14 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
python迭代器的使用方法实例
2013/11/21 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python常用列表数据结构小结
2014/08/06 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python 在函数上添加包装器
2020/07/28 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
环保倡议书
2014/04/14 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
毕业论文致谢词
2015/05/14 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
对讲机知识
2022/04/07 无线电
Python实现简单得递归下降Parser
2022/05/02 Python