vue3 | css | 添加蒙层

添加蒙层

！！！蒙层与被覆盖元素是兄弟关系！！！

效果图：

demo

<template>
    <div class="app">
        <button @click="showMask"></button>
    </div>
    <div class="mask" v-if="isMask == true" @click="activedMask"></div>
</template>

<script setup>
import { ref } from 'vue'

const isMask = ref(false)

// 触发蒙层
const activedMask = () => {
    isMask.value = !isMask.value
}

// 解除蒙层
const activedMask = () => {
    isMask.value = !isMask.value
}
</script>

<style lang="scss" scoped>
    .app{
    }
    .mask {
      width: 100vh;
      height: 100vh;
      background-color: rgba($color: #000000, $alpha: 0.5);
      position: absolute;
      top: 0;
      //蒙层的z-index要比被覆盖元素高
      z-index: 2;
    }
</style>