[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);
}
在main.js里面 :
import Vue from 'vue';
import Loading from '@/components/loading'
Vue.use(Loading)
这样就可以直接在组件里面手动调用啦!
调用方法: this.$loading.show(), this.$loading.hide()
因为这个项目暂时规模很小,就只有注册功能,我直接把调用写在axios请求拦截器里面,每次请求和请求结束都会调用loading,这样就不用在页面里面手动调用啦。
[vue开发记录]全局loading组件的更多相关文章
- 基于Vue开发的tab切换组件
github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...
- vue开发记录--element-ui的form表单label和placeholder国际化遇到的小问题
<el-form-item label="$t('permission.employeeName')"> <el-input v-model="form ...
- vue全局loading组件
本组件作用在页面加载完成前进行loader提示,提升用户体验,只需要在app.vue中引用一次,整个项目中路由切换时就可以自动进行提示(vuex版): 1. 添加vuex值和方法: import Vu ...
- [vue开发记录]vue仿ios原生datepicker实现
先上个效果图 现在只开发了年月,还在优化. 在网上看了一个纯原生js实现实现惯性滚动和回弹的文章 地址:https://www.cnblogs.com/ranyonsue/p/8119155.htm ...
- vue开发记录
vue开发过程中遇到的一些小问题.小技巧等,会不断更新~ 记录不详细处,欢迎留言
- vue和element全局loading
http请求的代码如下: import axios from 'axios' import { Message} from 'element-ui' import store from '../sto ...
- [vue开发记录]float label输入框
上图: 组件代码: <!-- Created by Locke Ou on 2018/6/20. --> <template> <div> <div clas ...
- Cocos2d-js 开发记录:Loading载入界面自定义
Loading界面是一个cc.Scene具体请看: http://blog.csdn.net/jonahzheng/article/details/38348255 如果仅仅是想把图片(cocos l ...
- CCS+C6678LE开发记录12:UIA组件的安装
在安装了CCS 6.0版本的IDE和最新版的MCSDK后似乎一切都很完美,但事实并非如此. 当我试图编译SDK附带的image_processing (IPC based) demo时出现如下错误: ...
随机推荐
- Java泛型用法总结
普通泛型 class Point< T>{ // 此处可以随便写标识符号,T是type的简称 private T var ; // var的类型由T指定,即:由外部指定 public T ...
- 解决爬虫中遇到的js加密问题之有道登录js逆向解析
具体实现在github上面(有详细的步骤): https://github.com/WYL-BruceLong/Spider_JS_ReverseParsin
- C# 深拷贝对象实现
public class DeepCopyHelper { //三种深拷贝方法 public static T DeepCopyByReflect<T>(T obj) { //如果是字符串 ...
- Python调用selenium
import time from selenium import webdriver from selenium.webdriver.common.touch_actions import Touch ...
- RPC原理及实现
一.什么是RPC RPC 的全称是 Remote Procedure Call 是一种进程间通信方式.它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数,而不用程序员显式编码这个 ...
- js分析 邮箱地址加密 [email protected]
0.参考 https://segmentfault.com/q/1010000000117476 javascript里function之前加上感叹号 ' ! ' 会怎么样? // 这么写会报错,因为 ...
- James Munkres Topology: Theorem 19.6
Theorem 19.6 Let \(f: A \rightarrow \prod_{\alpha \in J} X_{\alpha}\) be given by the equation \[ f( ...
- python全栈开发day111-flask路由及其参数,Flask配置,蓝图,几个装饰器、闪现、send_file、jsonify
1.endpoint参数,解决视图函数重名问题(包括装饰后重名问题) http://www.cnblogs.com/eric-nirnava/p/endpoint.html 每个应用程序app都有一个 ...
- 微服务化不同阶段 Kubernetes 的不同玩法
本文由 网易云发布. 作为容器集群管理技术竞争的大赢家,Kubernetes 已经和微服务紧密联系,采用 Kubernetes 的企业往往都开始了微服务架构的探索.然而不同企业不同阶段的微服务实践面 ...
- Azure Database for MySQL 报 Please specify SSL options and retry.
Exception has been thrown by the aspect of an invocation. ---> Authentication to host 'xxx.mysql. ...