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="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>