一、新建组件 mask.vue

 1<template>  
 2    <view>  
 3        <view class="cpt-mask">  
 4        </view>  
 5    </view>  
 6</template>  
 7
 8<script>  
 9    export default {
10   
11    }  
12</script>  
13
14<style>  
15    .cpt-mask {  
16        position: fixed;  
17        top: 0;  
18        left: 0;  
19        width: 100%;  
20        height: 100%;  
21        background-color: #000000;  
22        opacity: 0.5;  
23        z-index: 99;  
24    }  
25</style>

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

 1<template>
 2    <view>
 3        <!-- 遮罩组件 -->
 4        <myMaskv-if="mask"></myMask> 
 5    </view>
 6</template>
 7<script>
 8    import myMask from '@/common/mask.vue';
 9    export default {
10    components: {
11        myMask
12    },
13    data() {
14        return {
15            mask: false
16        }
17    },
18    methods: {
19
20    }
21}
22</script>

三、使用方法

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

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