Vue 全局loading组件实例详解


Posted in Javascript onMay 29, 2018

上图不上种,菊花万人捅:

Vue 全局loading组件实例详解

loading.js:

import './loading.css'
 let Loading = {}
// 避免重复install,设立flag
Loading.installed = false
Loading.install = function (Vue) {
 if (Loading.installed) return
 Vue.prototype.$loading = {}
 Vue.prototype.$loading.show = () => {
 // 如果页面有loading则不继续执行
 if (document.querySelector('#vue-loading')) return
 // 1、创建构造器,定义loading模板
 let LoadingTip = Vue.extend({
  template: `<div id="vue-loading">
     <div class="loader"></div>
     </div>`
 })
 // 2、创建实例,挂载到文档以后的地方
 let tpl = new LoadingTip().$mount().$el
 // 3、把创建的实例添加到body中
 document.body.appendChild(tpl)
 // 阻止遮罩滑动
 document.querySelector('#vue-loading').addEventListener('touchmove', function (e) {
  e.stopPropagation()
  e.preventDefault()
 })
 Loading.installed = true
 }
 Vue.prototype.$loading.hide = () => {
 let tpl = document.querySelector('#vue-loading')
 document.body.removeChild(tpl)
 }
}
export default Loading

loading.css:

#vue-loading {
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0
}
.loader {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 transform: rotate(165deg);
}
.loader:before, .loader:after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 transform: translate(-50%, -50%);
}
.loader:before {
 animation: before 2s infinite;
}
.loader:after {
 animation: after 2s infinite;
}
@keyframes before {
 0% {
 width: 0.5em;
 box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
 35% {
 width: 2.5em;
 box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }
 70% {
 width: 0.5em;
 box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }
 100% {
 box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}
@keyframes after {
 0% {
 height: 0.5em;
 box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
 35% {
 height: 2.5em;
 box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }
 70% {
 height: 0.5em;
 box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }
 100% {
 box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}
/**
 * Attempt to center the whole thing!
 */
html,
body {
 height: 100%;
}
.loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}

这样就可以直接在组件里面手动调用啦!

调用方法: this.$loading.show(),  this.$loading.hide()

因为这个项目暂时规模很小,就只有注册功能,我直接把调用写在axios请求拦截器里面,每次请求和请求结束都会调用loading,这样就不用在页面里面手动调用啦。

总结

以上所述是小编给大家介绍的Vue 全局loading组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JQuery的日期联动实现代码
Feb 24 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
微信小程序实现音乐播放器
Nov 20 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 #Javascript
详解vue-cli项目中怎么使用mock数据
May 29 #Javascript
js统计页面上每个标签的数量实例代码
May 29 #Javascript
浅谈React的最大亮点之虚拟DOM
May 29 #Javascript
深入理解Vue Computed计算属性原理
May 29 #Javascript
javascript、php关键字搜索函数的使用方法
May 29 #Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 #Javascript
You might like
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
通过url查找a元素并点击
2014/04/09 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
学生党员思想汇报
2013/12/28 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
电钳工人个人求职信
2014/05/10 职场文书
家具商场的活动方案
2014/08/16 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
科级干部培训心得体会
2016/01/06 职场文书
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL