uni-app 遮罩模板

1. common新建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>

 

2. 引入mask.vue文件。

<template>
    <view>
        <!-- 關閉遮罩 -->
        <view @click="remove(1)"> 
            <!-- 遮罩組件 -->
            <Mask v-if="mask"></Mask> 
        </view>  
        <view class="masks">
            <button type="primary" @click="remove(2)">顯示遮罩</button>
        </view>
    </view>
</template>
<script>
    import Mask from '../../common/mask.vue';
    export default {
    components: {
        Mask
    },
    data() {
        return {
            mask: false
        }
    },
    methods: {
        remove (val) {
            val == 1 ? this.mask = false : this.mask = true;
        }
    }
}
</script>
 
<style lang="less">
    page {
    　　background: #f8f8f8;
    }
　　.masks {
        position: absolute;
        bottom: 0;left: 50%-100rpx;right: 50%-100rpx;
    }
</style>