创建一个loading文件夹。包含loading.vue 、loading.js 、index.js loading.vue 写布局及css样式 实例代码
< template>
< div class = "loading-container" v- show= "loadingShow" >
< div class = "pageloading" >
< span> < / span>
< span> < / span>
< span> < / span>
< span> < / span>
< / div>
< / div>
< / template>
< script>
export default {
data ( ) {
return {
loadingShow: false ,
}
}
}
< / script>
< style scoped>
. loading- container{
position: fixed;
top: 0 ;
left: 0 ;
bottom: 0 ;
right: 0 ;
padding- top: 100 px;
z- index: 99999999 ;
background: rgba ( 255 , 255 , 255 , 0.7 ) ;
}
. pageloading{
width: 40 px;
margin: 0 auto;
}
. pageloading span{
display: inline- block;
width: 5 px;
height: 100 % ;
border- radius: 4 px;
background: lightgreen;
- webkit- animation: load 1 s ease infinite;
animation: load 1 s ease infinite;
}
@- webkit- keyframes load{
0 % , 100 % {
height: 20 px;
background: lightgreen;
}
50 % {
height: 50 px;
margin: - 15 px 0 ;
background: lightblue;
}
}
@keyframes load{
0 % , 100 % {
height: 20 px;
background: lightgreen;
}
50 % {
height: 50 px;
margin: - 15 px 0 ;
background: lightblue;
}
}
. pageloading span: nth- child ( 2 ) {
- webkit- animation- delay: 0.2 s;
animation- delay: 0.2 s;
}
. pageloading span: nth- child ( 3 ) {
- webkit- animation- delay: 0.4 s;
animation- delay: 0.4 s;
}
. pageloading span: nth- child ( 4 ) {
- webkit- animation- delay: 0.6 s;
animation- delay: 0.6 s;
}
. pageloading span: nth- child ( 5 ) {
- webkit- animation- delay: 0.8 s;
animation- delay: 0.8 s;
}
< / style>
import Vue from 'vue '
import pageLoading from './loading.vue '
const Mask = Vue. extend ( pageLoading)
const toggleLoading = ( el, binding) => {
if ( binding. value) {
Vue. nextTick ( ( ) => {
el. instance. loadingShow = true
insertDom ( el, el, binding)
} )
} else {
el. instance. loadingShow = false
}
}
const insertDom = ( parent, el) => {
parent. appendChild ( el. mask)
}
export default {
bind: function ( el, binding) {
const mask = new Mask ( {
el: document. createElement ( 'div' ) ,
data ( ) { }
} )
el. instance = mask
el. mask = mask. $el
el. maskStyle = { }
binding. value && toggleLoading ( el, binding)
} ,
update: function ( el, binding) {
if ( binding. oldValue !== binding. value) {
toggleLoading ( el, binding)
}
} ,
unbind: function ( el, binding) {
el. instance && el. instance. $destroy ( )
el = null
}
}
import pageloading from './loading.js '
export default {
install ( Vue) {
Vue. directive ( 'pageloading' , pageloading)
}
}
import pageloading from './components/pageloading' ;
Vue. use ( pageloading) ;
< template>
< div class = "container" v- pageloading= "pageloading" > page< / div>
< button @click= "changeLoading" > 打开/ 关闭loading< / button>
< / template>
< script>
export default {
data ( ) {
return {
pageloading: false ,
}
} ,
methods: {
changeLoading ( ) {
this . pageloading = ! this . pageloading;
}
}
}
< / script>
最后附上一个大佬写的css loading样式 传送门