vue实现全局遮罩层

实现全局遮罩层的几种方法

在Vue中实现全局遮罩层可以通过多种方式，以下是几种常见的方法：

使用Vue组件和状态管理

创建一个遮罩层组件，通过Vuex或Pinia管理其显示状态。

<template>
  <div v-if="show" class="global-mask">
    <!-- 遮罩层内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    showMask() {
      this.show = true
    },
    hideMask() {
      this.show = false
    }
  }
}
</script>

<style>
.global-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
</style>

使用Vue插件方式

创建一个Vue插件，通过全局方法控制遮罩层。

const MaskPlugin = {
  install(Vue) {
    const MaskComponent = Vue.extend({
      template: '<div v-show="show" class="global-mask"></div>',
      data() {
        return { show: false }
      }
    })

    const mask = new MaskComponent().$mount()
    document.body.appendChild(mask.$el)

    Vue.prototype.$mask = {
      show: () => mask.show = true,
      hide: () => mask.show = false
    }
  }
}

Vue.use(MaskPlugin)

使用Teleport组件（Vue 3）

Vue 3的Teleport组件可以方便地将遮罩层渲染到body下。

<template>
  <teleport to="body">
    <div v-if="show" class="global-mask"></div>
  </teleport>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

使用CSS和JavaScript动态控制

通过纯CSS和JavaScript动态添加/移除遮罩层元素。

function createGlobalMask() {
  const mask = document.createElement('div')
  mask.className = 'global-mask'
  document.body.appendChild(mask)

  return {
    show: () => mask.style.display = 'block',
    hide: () => mask.style.display = 'none'
  }
}

const mask = createGlobalMask()

遮罩层的样式优化

为了确保遮罩层覆盖整个视窗并位于最上层：

.global-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none; /* 默认隐藏 */
}

遮罩层的交互处理

可以添加点击事件来关闭遮罩层：

<template>
  <div 
    v-if="show" 
    class="global-mask"
    @click="hide"
  ></div>
</template>

性能考虑

频繁创建和销毁遮罩层可能影响性能，建议：

• 使用v-show代替v-if保持DOM存在
• 避免在遮罩层上使用复杂的动画
• 对于SPA应用，在App.vue中声明全局遮罩层