vue3 | 自定义遮罩层组件

组件模板

<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>