使用场景: 操作延迟时
效果图:
- 说明:显示在顶层,动态效果就是放一个gif图就行了
<template>
<!-- 使用说明: 必须设置body height:100% -->
<!-- tip加载图标 -->
<div class="loading" v-if="bOpen" :style="{ height: myStyle.height,
width: myStyle.width }">
<div class="content">
<img src="../assets/timg.gif"/>
<label>{{ text }}</label>
</div>
</div>
</template>
<script>
export default{
name: "Loading",
props:{
bOpen:{
type: Boolean,
default: true
},
text:{
type: String,
default: 'loading...'
}
},
data(){
return{
myStyle: {}
}
},
mounted() {
this.myStyle = this.setStyle();
},
methods:{
setStyle: function(){
var w = '' + document.body.clientWidth + 'px';
var h = '' + document.body.clientHeight + 'px';
return {
width: w,
height: h
}
}
}
}
</script>
<style>
.loading{
background-color: #55555500;
z-index: 1000;
text-align: center;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.loading .content label{
color: #0000EE;
margin-top: 0.25rem;
}
.loading .content img{
display: block;
margin: auto;
height: 6.25rem;
width: 6.25rem;
}
</style>
学习前端不久,有不对或者可以优化的地方,希望朋友们多多指正哦