loading.vue
<template>
<div v-if="show">
<div class="mask_loading">
<img src="../assets/img/loading.gif" alt="" class="loading" />
</div>
</div>
</template>
<script>
export default {
name: "loading",
data() {
return {};
},
props: {
show: Boolean,
},
};
</script>
<style scoped>
.loading {
width: 400px;
height: 300px;
position: absolute;
left: 45%;
top: 50%;
margin-left: -50px;
margin-top: -40px;
z-index: 13;
}
.mask_loading {
width: 100%;
height: 100%;
background: rgba(7, 6, 6, 0.5);
position: fixed;
top: 0;
z-index: 99999;
}
</style>
loading.js
import Vue from 'vue'
import loadingComponent from '../views/loading.vue'
const LoadingConstructor = Vue.extend(loadingComponent)
const instance = new LoadingConstructor({
el: document.createElement('div')
})
instance.show = false // 默认隐藏
const loading = {
show() { // 显示方法
instance.show = true
document.body.appendChild(instance.$el)
},
hide() { // 隐藏方法
instance.show = false
}
}
export default {
install() {
if (!Vue.$loading) {
Vue.$loading = loading
}
Vue.mixin({
created() {
this.$loading = Vue.$loading
}
})
}
}
main.js
// 引入全局loading
import loading from './js/loading'
// 全局使用loading
Vue.use(loading)
使用:
this.$loading.show(); // 显示loading
this.$loading.hide(); // 隐藏loading