uni-app 遮罩模板 _Uni-App

须知少年凌云志，曾许人间第一流。这篇文章主要讲述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>

【uni-app 遮罩模板】