当前位置：首页 > VUE

vue实现遮罩层

2026-02-19 22:52:20VUE

实现遮罩层的基本思路

在Vue中实现遮罩层通常需要创建一个半透明的覆盖层，覆盖在页面内容之上，用于阻止用户与底层内容的交互。遮罩层可以搭配弹窗、加载动画等组件使用。

使用CSS和Vue组件实现

创建一个Vue组件作为遮罩层，利用CSS设置样式和动画效果。

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

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    clickClose: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClick() {
      if (this.clickClose) {
        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;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

控制遮罩层的显示与隐藏

在父组件中通过v-model控制遮罩层的显示状态。

vue实现遮罩层

<template>
  <div>
    <button @click="showMask = true">显示遮罩层</button>
    <MaskLayer v-model="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 {
  background: white;
  padding: 20px;
  border-radius: 4px;
}
</style>

遮罩层的高级用法

可以扩展遮罩层功能，如添加动画效果、阻止滚动穿透等。

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

<script>
export default {
  props: {
    visible: Boolean,
    clickClose: {
      type: Boolean,
      default: true
    },
    lockScroll: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    visible(val) {
      if (this.lockScroll) {
        document.body.style.overflow = val ? 'hidden' : '';
      }
    }
  },
  methods: {
    handleClick() {
      if (this.clickClose) {
        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;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

使用第三方库实现

也可以使用现成的UI库如Element UI、Vant等提供的遮罩层组件。

vue实现遮罩层

<template>
  <div>
    <button @click="show = true">显示遮罩层</button>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Overlay } from 'vant';

export default {
  components: {
    [Overlay.name]: Overlay
  },
  data() {
    return {
      show: false
    };
  }
};
</script>

<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>