vue移动端实现遮罩

Vue移动端遮罩实现方法

基础遮罩层实现

通过CSS定位和Vue的v-show/v-if指令控制遮罩显示隐藏：

<template>
  <div>
    <div class="mask" v-show="showMask" @click="closeMask"></div>
    <button @click="showMask = true">显示遮罩</button>
  </div>
</template>

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

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

带内容的遮罩层

在遮罩层中添加弹窗内容并居中显示：

<template>
  <div class="mask" v-show="showMask" @click.self="closeMask">
    <div class="mask-content">
      <p>这里是弹窗内容</p>
      <button @click="closeMask">关闭</button>
    </div>
  </div>
</template>

<style>
.mask-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  background: white;
  border-radius: 8px;
  z-index: 101;
}
</style>

防止滚动穿透

移动端需要处理遮罩显示时页面滚动问题：

methods: {
  openMask() {
    this.showMask = true
    document.body.style.overflow = 'hidden'
  },
  closeMask() {
    this.showMask = false
    document.body.style.overflow = ''
  }
}

动画效果增强

添加CSS过渡动画使显示更流畅：

.mask {
  transition: opacity 0.3s;
  opacity: 0;
}
.mask.show {
  opacity: 1;
}

.mask-content {
  transition: all 0.3s;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
}
.mask-content.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

组件化封装

将遮罩封装为可复用组件：

<!-- Mask.vue -->
<template>
  <transition name="fade">
    <div class="mask" v-show="visible" @click.self="handleClose">
      <div class="mask-content">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

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

使用第三方库

对于复杂需求，可以使用vant等UI库：

import { Popup } from 'vant'

// 在组件中使用
<van-popup v-model="showMask" position="center" round>
  内容
</van-popup>