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: rgba(0,0,0,0.5);  
        opacity: 0.5;  
        z-index: 99;  
    }  
</style>
复制代码

 

2. 引入mask.vue文件。

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

  

posted @   本溢  阅读(10361)  评论(3)    收藏  举报
编辑推荐:
· JavaScript中如何遍历对象?
· 领域模型应用
· 记一次 ADL 导致的 C++ 代码编译错误
· MySQL查询执行顺序:一张图看懂SQL是如何工作的
· 为什么PostgreSQL不自动缓存执行计划?
阅读排行:
· 从被喷“假开源”到登顶 GitHub 热榜,这个开源项目上演王者归来!
· Stack Overflow,轰然倒下!
· Cursor 1.2重磅更新,这个痛点终于被解决了!
· .NET AI 模板
· C#脚本化(Roslyn):如何在C#脚本中引入nuget包
点击右上角即可分享
微信分享提示