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 @   本溢  阅读(10363)  评论(3)    收藏  举报
编辑推荐:
· 源码浅析:SpringBoot main方法结束为什么程序不停止
· C#性能优化:为何 x * Math.Sqrt(x) 远胜 Math.Pow(x, 1.5)
· 本可避免的P1事故:Nginx变更导致网关请求均响应400
· 还在手写JSON调教大模型?.NET 9有新玩法
· 复杂业务系统线上问题排查过程
阅读排行:
· AI 的力量,开发者的翅膀:欢迎使用字节旗下的 AI 原生开发工具 TRAE
· 「闲聊文」准大三的我,思前想后还是不搞java了
· .NET 9 的免费午餐:GZip 性能提升38.3%
· 2025年:是时候重新认识System.Text.Json了
· 开源新旗舰 GLM-4.5:不想刷榜,只想干活儿
点击右上角即可分享
微信分享提示