组件模板

<template><Teleport to="body" :disabled="!appendToBody"><div v-bind="$attrs" v-show="modelValue" class="maskLayer-overlay" :style="{ background }"><div class="maskLayer-content" :style="{ marginTop: props.center ? 0 : props.top, alignItems: props.center ? 'center' : 'stretch' }"><slot></slot></div></div></Teleport>
</template><script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue';const props = defineProps({modelValue: {type: Boolean,default: false},center: {type: Boolean,default: false},top: {type: String,default: '30vh'},background: {type: String,default: 'rgba(0, 0, 0, 0.7)'},appendToBody: {type: Boolean,default: false}
})</script><style lang='scss' scoped>
.maskLayer-overlay{position: fixed;margin: 0;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;z-index: 2200;.maskLayer-content{width: 100%;height: 100%;display: flex;justify-content: center;}
}
</style>

使用方法

<maskLayer v-model="visible" center append-to-body><div>内容</div>
</maskLayer>