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: ;
        left: ;
        width: %;
        height: %;
        background-color: #;
        opacity: 0.5;
        z-index: ;
    }
</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 ==  ? this.mask = false : this.mask = true;
        }
    }
}
</script>

<style lang="less">
    page {
    　　background: #f8f8f8;
    }
　　.masks {
        position: absolute;
        bottom: ;left: %-100rpx;right: %-100rpx;
    }
</style>