uniapp弹出遮罩模板
文章描述：
uniapp弹出遮罩模板的使用方法
遮罩模板
在common目录下面新建一个mask.vue文件，代码如下：
template
<template>
<view class="popup">
<view class="page">
<view class="content">内容</view>
</view>
</view>
</template>style
page{
background: #fff;
}
.popup{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.4);
z-index:99;
}
.page{
padding: 100upx 55upx 0 55upx;
}
.content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}载入
template
<template>
<view>
<mask></mask>
</view>
</template>script
import mask from '../../common/mask.vue'
export default {
components:{
mask
},
data() {
return {
}
},
methods: {
}
}显示与隐藏
template
<template>
<view>
<view @click="maskClick(1)"><mask v-if="mask"></mask></view>
<view><button type="primary" @click="maskClick(2)">显示遮罩</button></view>
</view>
</template>script
import mask from '../../common/mask.vue'
export default {
components:{
mask
},
data() {
return {
mask:false
}
},
methods: {
maskClick(val){
console.log(val);
val == 1 ? this.mask = false : this.mask = true;
}
}
}
发布时间：2021/09/20
发表评论