vue移动端实现遮罩

vue移动端遮罩实现方法

基础遮罩实现

使用position: fixed覆盖全屏，搭配z-index控制层级

<template>
  <div class="mask" v-show="showMask"></div>
</template>

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

动态控制遮罩

通过v-model绑定控制显示状态

export default {
  data() {
    return {
      showMask: false
    }
  },
  methods: {
    toggleMask() {
      this.showMask = !this.showMask
    }
  }
}

阻止背景滚动

遮罩显示时禁用页面滚动

watch: {
  showMask(newVal) {
    if (newVal) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
  }
}

点击遮罩关闭

添加点击事件处理

<div class="mask" v-show="showMask" @click="showMask = false"></div>

高级遮罩组件

封装可复用的遮罩组件

<template>
  <transition name="fade">
    <div 
      class="mask" 
      v-show="visible"
      @click="handleClick"
      :style="{ backgroundColor: bgColor }"
    ></div>
  </transition>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    bgColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.5)'
    },
    closable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClick() {
      if (this.closable) {
        this.$emit('update:visible', false)
      }
    }
  }
}
</script>

动画效果

添加过渡动画

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

移动端优化

针对移动端特殊处理

.mask {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

注意事项

• 确保遮罩层级高于页面内容但低于弹窗内容
• 考虑全面屏设备的适配问题
• 在组件销毁时恢复body的overflow属性
• 处理多个遮罩同时存在的层级关系