vue实现全屏遮罩层

实现全屏遮罩层的方法

在Vue中实现全屏遮罩层可以通过CSS和Vue组件结合完成。以下是具体实现方式：

创建遮罩层组件

创建一个名为Overlay.vue的组件：

<template>
  <div 
    class="overlay" 
    v-show="visible"
    @click.self="handleClick"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

使用遮罩层组件

在父组件中使用：

<template>
  <div>
    <button @click="showOverlay = true">显示遮罩层</button>
    <Overlay :visible="showOverlay" @close="showOverlay = false">
      <!-- 这里可以放置弹窗内容 -->
      <div class="modal-content">
        <h3>这是遮罩层中的内容</h3>
        <button @click="showOverlay = false">关闭</button>
      </div>
    </Overlay>
  </div>
</template>

<script>
import Overlay from './Overlay.vue'

export default {
  components: { Overlay },
  data() {
    return {
      showOverlay: false
    }
  }
}
</script>

<style>
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

动态控制遮罩层

通过v-model可以更优雅地控制遮罩层显示：

<template>
  <Overlay v-model="showOverlay">
    <!-- 内容 -->
  </Overlay>
</template>

<script>
export default {
  model: {
    prop: 'visible',
    event: 'close'
  },
  // 其他代码保持不变
}
</script>

遮罩层动画效果

添加过渡动画增强用户体验：

<template>
  <transition name="fade">
    <div class="overlay" v-show="visible">
      <!-- 内容 -->
    </div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

全局遮罩层服务

对于需要在任意组件触发的遮罩层，可以创建全局服务：

// overlayService.js
import Vue from 'vue'

const OverlayComponent = Vue.extend({
  template: `<div class="overlay" v-show="visible"></div>`,
  data() {
    return {
      visible: false
    }
  }
})

const overlay = new OverlayComponent({
  el: document.createElement('div')
})

document.body.appendChild(overlay.$el)

export default {
  show() {
    overlay.visible = true
  },
  hide() {
    overlay.visible = false
  }
}

然后在任何组件中调用：

import overlayService from './overlayService'

// 显示遮罩层
overlayService.show()

// 隐藏遮罩层
overlayService.hide()