vue tip加载组件

使用场景:操作延迟时
效果图：

• 说明：显示在顶层，动态效果就是放一个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>

学习前端不久，有不对或者可以优化的地方，希望朋友们多多指正哦