编程 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 相关文章推荐

ext实现完整的登录代码

Aug 08 Javascript

JavaScript 学习笔记（十五）

Jan 28 Javascript

基于javascipt-dom编程 table对象的使用

Apr 22 Javascript

jquery实现点击文字可编辑并修改保存至数据库

Apr 15 Javascript

jquery处理json数据实例分析

Jun 03 Javascript

JS实现闪动的title消息提醒效果

Jun 20 Javascript

JS处理json日期格式化问题

Oct 01 Javascript

整理Javascript数组学习笔记

Nov 29 Javascript

老生常谈JavaScript数组的用法

Jun 10 Javascript

利用JS轻松实现获取表单数据

Dec 06 Javascript

jQuery EasyUI window窗口使用实例代码

Dec 25 jQuery

idea编译器vue缩进报错问题场景分析

Jul 04 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开发框架总结收藏

2008/04/24 PHP

php 利用array_slice函数获取随机数组或前几条数据

2015/09/30 PHP

关于WordPress的SEO优化相关的一些PHP页面脚本技巧

2015/12/10 PHP

php抽奖概率算法（刮刮卡，大转盘）

2020/04/17 PHP

PHP+JQuery+Ajax实现分页方法详解

2016/08/06 PHP

php设计模式之原型模式分析【星际争霸游戏案例】

2020/03/23 PHP

简单的php购物车代码

2020/06/05 PHP

ext读取两种结构的xml的代码

2008/11/05 Javascript

关于this和self的使用说明

2010/08/01 Javascript

动态加载js和css(外部文件)

2013/04/17 Javascript

js播放wav文件(源码)

2013/04/22 Javascript

JavaScript动态修改网页元素内容的方法

2015/03/21 Javascript

jQuery结合CSS制作漂亮的select下拉菜单

2015/05/03 Javascript

js改变style样式和css样式的简单实例

2016/06/28 Javascript

jQuery实现将div中滚动条滚动到指定位置的方法

2016/08/10 Javascript

ReactNative页面跳转实例代码

2016/09/27 Javascript

JS 事件绑定、事件监听、事件委托详细介绍

2016/09/28 Javascript

jQuery实现可兼容IE6的遮罩功能详解

2017/09/19 jQuery

在vue项目中安装使用Mint-UI的方法

2017/12/27 Javascript

vue 组件中添加样式不生效的解决方法

2018/07/06 Javascript

vue-lazyload使用总结(推荐)

2018/11/01 Javascript

微信小程序tabbar底部导航

2018/11/05 Javascript

D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

2019/05/09 Javascript

vue 路由子组件created和mounted不起作用的解决方法

2019/11/05 Javascript

vue实现从外部修改组件内部的变量的值

2020/07/30 Javascript

[01:44]剑指西雅图展望TI之CIS战队专访

2014/06/25 DOTA

使用Python进行中文繁简转换的实现代码

2019/10/18 Python

使用Python来做一个屏幕录制工具的操作代码

2020/01/18 Python

flask框架中的cookie和session使用

2021/01/31 Python

班班通项目实施方案

2014/02/25 职场文书

售房委托书

2014/08/30 职场文书

群众路线个人对照检查材料

2014/09/23 职场文书

2016国培研修心得体会

2016/01/08 职场文书

2016年教师党员公开承诺书

2016/03/24 职场文书

工作转正自我鉴定范文

2019/06/21 职场文书

Spring Bean是如何初始化的详解

2022/03/22 Java/Android