//loading.vue
<template>
<div class="load">
<div class="load-content">
<img :src="require('src/static/images/loading.gif')"/>
<slot></slot>
</div>
<div class="load-mark"></div>
</div>
</template>
<script>
export default {
// loading组件
name: 'loading'
}
</script>
<style scoped lang="less">
.load{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 4000;
&-content{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
transform: scaleY(-50%);
z-index: 4002;
img{
width:15%;
}
}
&-mark{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 4001;
background: #fff;
opacity: 0.6;
}
}
</style>
//loading/index.js
import load from './loading.vue'
import Vue from 'vue'
let _loading = null
const loading = {
show(con = {}) {
let Instance = Vue.extend(load)
let vm = new Instance()
for (let i in con) {
vm[i] = con[i]
}
_loading = vm.$mount().$el
document.body.appendChild(_loading)
},
clear() {
if (_loading && _loading.contains && document.body.contains(_loading)) {
document.body.removeChild(_loading)
_loading = null
}
}
}
export default loading
vue自定义全局loading
最新推荐文章于 2024-07-19 20:55:59 发布