一、新建组件mask.vue

<template>  
    <view>  
        <view class="cpt-mask">  
        </view>  
    </view>  
</template>  

<script>  
    export default {
   
    }  
</script>  

<style>  
    .cpt-mask {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        background-color: #000000;  
        opacity: 0.5;  
        z-index: 99;  
    }  
</style>

二、在有需求的页面引入mask.vue遮罩组件

<template>
    <view>
        <!-- 遮罩组件 -->
        <myMaskv-if="mask"></myMask> 
    </view>
</template>
<script>
    import myMask from '@/common/mask.vue';
    export default {
    components: {
        myMask
    },
    data() {
        return {
            mask: false
        }
    },
    methods: {

    }
}
</script>

三、使用方法

当mask为true时显示遮罩，false时关闭遮罩

转载：https://www.cnblogs.com/ljy-/p/12144428.html