vue遮罩层实现

实现遮罩层的基本方法

在Vue中实现遮罩层可以通过CSS和Vue指令结合完成。常见的遮罩层通常是一个半透明的全屏层，用于覆盖页面内容并阻止用户交互。

创建遮罩层组件：

<template>
  <div class="mask" v-if="visible" @click.self="handleClose">
    <slot></slot>
  </div>
</template>

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

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

使用遮罩层组件

在父组件中使用遮罩层：

<template>
  <div>
    <button @click="showMask = true">显示遮罩层</button>
    <MaskLayer :visible.sync="showMask">
      <div class="content">这里是遮罩层内容</div>
    </MaskLayer>
  </div>
</template>

<script>
import MaskLayer from './MaskLayer.vue';

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

<style>
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 4px;
}
</style>

遮罩层动画效果

为遮罩层添加过渡动画可以提升用户体验：

<template>
  <transition name="fade">
    <div class="mask" v-if="visible" @click.self="handleClose">
      <slot></slot>
    </div>
  </transition>
</template>

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

防止滚动穿透

遮罩层显示时，通常需要禁止页面滚动：

<script>
export default {
  watch: {
    visible(val) {
      if (val) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = '';
      }
    }
  },
  beforeDestroy() {
    document.body.style.overflow = '';
  }
}
</script>

全局遮罩层实现

通过Vue插件方式实现全局遮罩层：

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

    const instance = new MaskConstructor().$mount();
    document.body.appendChild(instance.$el);

    Vue.prototype.$mask = {
      show() {
        instance.visible = true;
      },
      hide() {
        instance.visible = false;
      }
    }
  }
};

export default Mask;

在main.js中使用：

import Mask from './mask';
Vue.use(Mask);

在组件中调用：

this.$mask.show(); // 显示全局遮罩层
this.$mask.hide(); // 隐藏全局遮罩层