最近有使用到element组件中的loading，主要是处理后台传输数据太大，页面这边较长时间处于一个白屏，这里使用了一个loading组件，来进行一个优化，当然这只是视觉层面的一个简单优化，如果不用loading条，用资源懒加载的方式或许更好，这边回归正题，因为我这边是想做成进度条由0加载到100，而elemen的loading组件我看了下给的示例里面只允许加入text，icon，达不到我想要的效果，这边我自己做了一个简单的示例。

这样看起来效果是不是更好，那么如何获取到后台传输的一个进度值呢？下面贴一下我的代码

ajax的原理就是通过XmlHttpRequest对象向服务器发送异步请求，从服务器获取数据后，通过javascript进行DOM操作

这里就是先获取到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用，通过xhr对象的loaded和total属性就可以获取到进度啦！大功告成

当然我这边是直接使用的element的progress组件，你也可以自定义，甚至可以加一些动画显得更牛逼。

Ajax配合vue+element打造个人专属loading的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

  2. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  3. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  4. 前端小菜鸡使用Vue+Element笔记（一）

    关于使用Vue+Element的项目简介~ 最近因为项目组缺前端人员,所以自己现学现做页面,先把前后台功能调通 觉得前端可真的是不容易呀哎呀~ 首先记录一下相关的Vue入门的教程: vue环境搭建示例 ...

  5. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  6. 新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  7. 纯css3配合vue实现微信语音播放效果

    前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...

  8. 循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

    在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般 ...

  9. 循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

    在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...

随机推荐

  1. VS的Mvc项目右键没有控制器右键菜单(转)

    今天遇到了一个比较少见的问题,我用vs2012打开一个从Svn上拉下来的mvc5项目,在Controller文件夹上右键却发现没有新建控制器的选项,在View文件夹上右键也没有新建视图的选项. 我的第 ...

  2. python学习：输入中文

    输入中文 python2 输入中文:#!-*- coding:utf-8 -*-(或者#coding:utf-8)例如: msg = u"我爱北京天安门!" print msg p ...

  3. (77)Wangdao.com第十五天_JavaScript 用于数据交换的文本格式 JSON 对象

    JSON 对象 JSON (JavaScript Object Notation 的缩写) 也是一种数据,是 JavaScript 的原生对象,用来处理 JSON 格式数据.它有两个静态方法:JSON ...

  4. Node.js_密码明文_密文_加密库_sha1

    加密库 sha1 加密模块,能够将指定 明文 加密成一个长度相等的 密文 let pwd = 'qwe123456'; const secret = sha1(pwd); 同样的明文,加密得到同样的密 ...

  5. [LeetCode] Most Profit Assigning Work 安排最大利润的工作

    We have jobs: difficulty[i] is the difficulty of the ith job, and profit[i] is the profit of the ith ...

  6. mysql 查询 两个表中不同字段的 和，并通过两个表的时间来分组

    ( SELECT sum( a.cost_sum ) AS sum_cost, sum( a.phone_sum ) AS sum_phone, sum( a.arrive_sum ) AS sum_ ...

  7. jquery运用FormData结合Ajax异步上传表单，超实用

    首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到 var formData ...

  8. myeclipse连接mysql失败出错，已解决问题

    问题描述: 解决方案:

  9. 第三周学习java第四章学习总结及体会！

    第三周java 2第四章的学习总结: 一.主要内容(类与对象): 1.类: 2.构造方法与对象的创建: 3.类与程序的基本结构: 4.参数传值: 5.对象的组合: 6.实例成员与类成员: 7.方法重载 ...

  10. masonry布局说明

    这个要根据情况而定,有时会很有用的. setContentHuggingPriority: 优先级越高,代表压缩越厉害,越晚被拉伸.就是上图中那人拉的力量更强. setContentCompressi ...