目录结构
|-- loading
|-- index.js
|-- loading.vue
index.js
import Vue
from 'vue';
import lodingComponet
from './loading.vue';
const Loading
= Vue
.extend(lodingComponet
);
let instance
= new Loading({
el
: document
.createElement('div')
});
let loading
= {
show() {
instance
.vm
= instance
.$mount();
document
.body
.appendChild(instance
.vm
.$el
);
instance
.show
= true;
},
hide() {
instance
.show
= false;
}
};
export default {
install
: function() {
Vue
.prototype
.$loading
= loading
;
return loading
;
}
};
loading.vue
<template>
<div v-if="show" class="loding">
<img src="/static/images/loding.gif">
</div>
</template>
<script>
export default {
name: 'loding',
props: {
show: {
type: Boolean,
default: false
}
}
};
</script>
<style lang="scss">
.loding {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
text-align: center;
}
.loding img {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%) scale(0.8);
}
.loding-full {
background: rgba(255, 255, 255, 0.3);
}
</style>
使用
import lodingPlugins
from '@/plugins/loading';
const loading
= lodingPlugins
.install();
loading
.show();
