loading实现形式多种多样
1.以组件形式实现 Vue.component()
2.以v-loading的形式实现 Vue.directive()
3.以服务形式调用loading loading.service()
简单代码实现第三种,服务形式调用
新建两个文件,一个index.js,一个loading.vue
index.js内容
import Vue from "vue";
import mask from "./loading.vue"; // 引入loading实例
const Mask = Vue.extend(mask);
// 返回loadingService服务状态的实例 Loading.service()方式调用
export const Loading = (function() {
let Service = function() {
var div;
var loadingMask;
this.service = function() {
div = document.createElement("div");
let child = document.createElement("div");
div.appendChild(child);
document.body.appendChild(div);
loadingMask = new Mask();
loadingMask.visible = true;
loadingMask.$mount(child);
};
this.close = function() {
loadingMask.visible = false;
document.body.removeChild(div);
};
};
return new Service();
})(); // 自调用,这样return出来的就可以直接使用了,不用再运行一次
loading.vue文件
<template>
<div v-show="visible"
class="loading-wrap">
<div class="loading-box">
<img src="@/assets/loading.png">
</div>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
};
},
};
</script>
<style lang="less" scoped>
@keyframes turn {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.loading-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(39, 37, 37, 0.8);
}
.loading-box {
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
transform: translate(-50%, -50%);
img {
width: 100%;
height: 100%;
animation: turn 1s linear infinite;
}
}
</style>
使用
import { Loading } from "@/components/loading";
Loading.service();
Loading.close();