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>
· JavaScript中如何遍历对象?
· 领域模型应用
· 记一次 ADL 导致的 C++ 代码编译错误
· MySQL查询执行顺序:一张图看懂SQL是如何工作的
· 为什么PostgreSQL不自动缓存执行计划?
· 从被喷“假开源”到登顶 GitHub 热榜,这个开源项目上演王者归来!
· Stack Overflow,轰然倒下!
· Cursor 1.2重磅更新,这个痛点终于被解决了!
· .NET AI 模板
· C#脚本化(Roslyn):如何在C#脚本中引入nuget包