vue遮罩实现

实现遮罩的基本方法

在Vue中实现遮罩效果通常需要结合CSS和Vue的模板语法。遮罩层一般是一个半透明的div元素，覆盖在整个页面上方或特定区域上方。

<template>
  <div>
    <button @click="showMask = !showMask">切换遮罩</button>
    <div v-if="showMask" class="mask"></div>
  </div>
</template>

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

<style>
.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="showDialog = true">打开对话框</button>
    <div v-if="showDialog" class="mask" @click.self="showDialog = false">
      <div class="dialog-content">
        <h3>这是对话框标题</h3>
        <p>对话框内容...</p>
        <button @click="showDialog = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    }
  }
}
</script>

<style>
.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;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
}
</style>

动画过渡效果

为遮罩添加淡入淡出效果可以提升用户体验，使用Vue的transition组件实现。

<template>
  <div>
    <button @click="showMask = !showMask">切换遮罩</button>
    <transition name="fade">
      <div v-if="showMask" class="mask"></div>
    </transition>
  </div>
</template>

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

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

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

全局遮罩组件

创建一个可复用的全局遮罩组件，方便在整个应用中使用。

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

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

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

.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>

使用全局遮罩组件

在父组件中使用自定义的遮罩组件。

<template>
  <div>
    <button @click="showMask = true">显示遮罩</button>
    <Mask v-model="showMask" :click-to-close="true">
      <div class="custom-content">
        <h3>自定义内容</h3>
        <button @click="showMask = false">关闭</button>
      </div>
    </Mask>
  </div>
</template>

<script>
import Mask from './Mask.vue'

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

<style>
.custom-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
}
</style>

这些方法涵盖了Vue中实现遮罩效果的基本到高级用法，可以根据具体需求选择合适的实现方式。