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 相关文章推荐
javascript 常用关键字列表集合
Dec 04 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
Vue实现搜索结果高亮显示关键字
May 28 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继承的一个应用
2011/09/06 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
php扩展开发入门demo示例
2019/09/23 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
关于js datetime的那点事
2011/11/15 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
python实现名片管理系统
2018/11/29 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
五一服装活动方案
2014/01/11 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
工程招投标邀请书
2014/01/30 职场文书
办公室文员自荐书
2014/02/03 职场文书
《画风》教学反思
2014/04/16 职场文书
啦啦队口号大全
2014/06/16 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
党员承诺书格式范文
2015/04/28 职场文书