vue实现全局遮罩层

vue实现全局遮罩层的方法

使用Vue指令实现

创建自定义指令v-mask，在指令中动态生成遮罩层DOM元素并控制显示隐藏。这种方法适合局部或全局复用。

// 全局注册指令
Vue.directive('mask', {
  inserted: function(el, binding) {
    const mask = document.createElement('div')
    mask.className = 'global-mask'
    mask.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 9999;
      display: ${binding.value ? 'block' : 'none'};
    `
    el.dataset.maskId = 'mask_' + Date.now()
    document.body.appendChild(mask)
  },
  update: function(el, binding) {
    const mask = document.querySelector('.global-mask')
    if (mask) mask.style.display = binding.value ? 'block' : 'none'
  }
})

// 使用方式
<div v-mask="isShowMask"></div>

通过Vue插件封装

将遮罩层封装为Vue插件，通过this.$mask.show()和this.$mask.hide()全局调用。

const MaskPlugin = {
  install(Vue) {
    const mask = {
      show() {
        let mask = document.querySelector('.global-mask')
        if (!mask) {
          mask = document.createElement('div')
          mask.className = 'global-mask'
          mask.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
          `
          document.body.appendChild(mask)
        }
      },
      hide() {
        const mask = document.querySelector('.global-mask')
        if (mask) document.body.removeChild(mask)
      }
    }
    Vue.prototype.$mask = mask
  }
}

Vue.use(MaskPlugin)

使用组件+状态管理

结合Vuex创建全局状态控制的遮罩组件，适合中大型项目。

// store.js
state: {
  showMask: false
},
mutations: {
  SET_MASK(state, payload) {
    state.showMask = payload
  }
}

// GlobalMask.vue
<template>
  <div v-if="$store.state.showMask" class="global-mask"></div>
</template>

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

// 调用方式
this.$store.commit('SET_MASK', true)

动态组件实现

创建可编程式调用的动态组件，通过服务方式控制显示。

// maskService.js
let maskInstance

export default {
  show() {
    if (!maskInstance) {
      const MaskComponent = Vue.extend({
        template: '<div class="global-mask"></div>'
      })
      maskInstance = new MaskComponent().$mount()
      document.body.appendChild(maskInstance.$el)
    }
  },
  hide() {
    if (maskInstance) {
      document.body.removeChild(maskInstance.$el)
      maskInstance = null
    }
  }
}

// 使用方式
import maskService from './maskService'
maskService.show()

每种实现方式各有优劣，可根据项目规模选择合适方案。指令方式适合简单需求，插件和组件方式更适合复杂场景，动态组件服务方式则提供了最大灵活性。