vue3中定义全局遮罩层 - Vue | 落日 = 清街余晖

在前端我们调用接口等待的过程中我们经常会用到遮罩层 loading 的效果，结果返回后遮罩层消息

# 定义一个组件 (MaskLayer)

	<template>
	<div :class="[show ? 'show' : '', 'kl-mask-load']">
	<div class="load">
	<div class="square">
	<div class="Round0"></div>
	<div class="Round1"></div>
	<div class="Round2"></div>
	<div class="Round3"></div>
	</div>
	<div class="square squareRotate">
	<div class="Round4"></div>
	<div class="Round5"></div>
	<div class="Round6"></div>
	<div class="Round7"></div>
	</div>
	<span style="font-size: 12px; position: absolute; bottom: 0px; left: 28px"
	><!--swig0--></span
	>
	</div>
	<slot></slot>
	</div>
	</template>

	<script setup>
	import { defineProps } from 'vue'

	const props = defineProps({
	show: {
	default: true,
	type: Boolean,
	},
	text: {
	default: "加载中...",
	type: String
	}
	})
	</script>

	<style scoped>
	.kl-mask-load {
	z-index: 9999;
	background-color: #0a4d39;
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	transition: opacity 0.2s ease-in;
	display: grid;
	align-items: center;
	place-items: center;
	pointer-events: none;
	}

	.kl-mask-load.show {
	opacity: 0.3;
	pointer-events: auto;
	transition: opacity 0.2s ease-in;
	}

	.load {
	display:block;
	background-color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 90px;
	height: 90px;
	z-index: 100000;
	border-radius: 10px;
	text-align: center;
	}

	.square {
	position: absolute;
	height: 40px;
	width: 40px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0px;
	margin: auto;
	}

	.Round0,
	.Round1,
	.Round2,
	.Round3,
	.Round4,
	.Round5,
	.Round6,
	.Round7 {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: aqua;
	position: absolute;
	animation: loadding 1.2s both infinite;
	}

	.Round0 {
	top: 0;
	left: 0;
	animation-delay: 0s;
	}

	.Round1 {
	top: 0;
	right: 0;
	animation-delay: 0.3s;
	}

	.Round2 {
	bottom: 0;
	left: 0;
	animation-delay: 0.5s;
	}

	.Round3 {
	bottom: 0;
	right: 0;
	animation-delay: 0.7s;
	}

	.Round4 {
	top: 0;
	left: 0;
	animation-delay: 0.2s;
	}

	.Round5 {
	top: 0;
	right: 0;
	animation-delay: 0.4s;
	}

	.Round6 {
	bottom: 0;
	left: 0;
	animation-delay: 0.6 s;
	}

	.Round7 {
	bottom: 0;
	right: 0;
	animation-delay: 0.8s;
	}

	.squareRotate {
	transform: rotate(45deg);
	}

	@keyframes loadding {
	0% {
	transform: scale(0);
	}

	40% {
	transform: scale(1);
	}

	80% {
	transform: scale(0);
	}

	100% {
	transform: scale(0);
	}
	}
	</style>

# 定义一个 js 文件

	import {
	createApp,
	defineComponent,
	createVNode,
	render
	} from "vue";
	import MaskLayer from "../components/MaskLayer.vue";

	const app = createApp({});

	const container = document.createElement('div')
	const maskLayerInstance = {
	install: function (text) {
	if (text) {
	const vm = createVNode(
	MaskLayer, {
	text: text,
	show: true
	}
	)
	render(vm, container)
	} else {
	const vm = createVNode(
	MaskLayer, {
	text: '加载中',
	show: true
	}
	)
	render(vm, container)
	}
	document.body.appendChild(container)
	},
	close: function () {
	const vm = createVNode(
	MaskLayer, {
	text: '',
	show: false
	}
	)
	render(vm, container)
	document.body.appendChild(container)

	}
	}

	export default maskLayerInstance

# 在 main.ts 中 (挂载到 vue 实例上)

	import { createApp } from 'vue';
	const app = createApp(App);
	import MaskLayer from '/@/common/js/MaskLayer'
	app.config.globalProperties.$loading=MaskLayer
	app.mount('#app');

# 在组件中使用

	<script lang="ts" setup>
	const instance = getCurrentInstance();
	// 开启 loading
	instance.appContext.config.globalProperties.$loading.install()
	// 关闭 loading
	setTimeout(() => {
	instance.appContext.config.globalProperties.$loading.close();
	}, 5000);
	</script>