1.Loading.vue
<template>
<div class="loading-box">
<img src="../../../../src/components/Common/Load/loading.gif">
<span class="word">{{loadingWord}}</span>
</div>
</template>
<script>
export default{
data:function () {
return{}
},
props:{
loadingWord:{
type:String,
default:'加載中....'
}
}
}
</script>
<style scoped>
.loading-box{
text-align: center;
width: 200px;
height: 80px;
z-index: 110;
}
.loading-box img{
margin: 0 auto;
width: 32px;
height: 32px;
display: block;
}
.loading-box span{
font-size: 14px;
height: 30px;
line-height: 20px;
margin-top: 8px;
color: black;
}
</style>
2.Home.vue
<!--加載-->
<k-loading class="loadingBox" v-show="kloading"></k-loading>
import Loading from '../../../src/components/Common/Load/loading.vue'
components:{
kLoading:Loading
}
.loadingBox{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}