multimedia-portal/src/components/Mask.vue

<script setup>


const props = defineProps({
  // 是否显示遮罩层
  visible: {
    type: Boolean,
    default: false
  },
  // 自定义样式
  style: {
    type: String,
    default: ''
  },
  // 自定义内容样式
  contentStyle: {
    type: String,
    default: ''
  }
})

// 定义事件
const emit = defineEmits(['close'])

// 关闭遮罩层的方法
const handleClose = () => {
  emit('close')
}
</script>

<template>
  <!-- 遮罩层容器 -->
  <div
    v-if="visible"
    class="mask"
    @click.self="handleClose"
    :style="style"

  >
    <div class="mask-content" :style="contentStyle">
      <!-- 插槽：用于插入自定义内容 -->
      <slot></slot>
    </div>
  </div>
</template>



<style scoped>
.mask {
  /* 固定定位，覆盖整个屏幕 */
  position: fixed;
  inset: 0;
  /* 半透明黑色背景 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 层级设置 */
  z-index: 1000;
  /* 弹性布局，使内容居中 */
  /* 添加过渡效果 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transition: opacity 0.3s ease;
}

.mask-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  max-width: 700px;
  min-width: 300px;
  height: auto;
  display: inline-block;
  max-height: 80vh;
  overflow-x: auto;
  margin-top: 5%;
}
</style>