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: #000000; opacity: 0.5; z-index: 99; } </style>
2. 引入mask.vue文件。
<template> <view> <view @click="remove(1)"> // 关闭遮罩 <Mask v-if="mask"></Mask> </view> <view class="mask"> <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 == 1 ? this.mask = false : this.mask = true; } } } </script> <style lang="less"> page { background: #f8f8f8; } .mask { position: absolute; bottom: 0;left: 50%-100px;right: 50%-100px; } </style>