uni-app 遮罩模板

Posted 2021-03-19 本溢

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="mask">
	    <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;
    }
　　 .mask {
	position: absolute;
	bottom: 0;left: 50%-100px;right: 50%-100px;
　　 }
</style>