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>
【推荐】AI 的力量,开发者的翅膀:欢迎使用 AI 原生开发工具 TRAE
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 源码浅析: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:不想刷榜,只想干活儿