[uni-app实现弹窗遮罩]uni-app实现弹窗遮罩

代码：

<template>
<view>
<view class=”systemboxItem” @click=”showSystemDialog(index)” v-for=”(item,index) in system” :key=”index”>
<view class=”systemboxItemTop”>
<span class=”systemboxItemTopLeft”>{{item.title}}</span>
<span class=”systemboxItemTopRight”>{{item.replaceTime}}</span>
</view>
<view class=”systemboxItemBottom”>
<span class=”systemInformation”></span>
<span class=”redLittle”></span>
</view>
</view>
<messageDialog :content=”dialogContent”></messageDialog>
</view>
</template>

<script>
import Utils from ‘@/common/js/center.js’;
import messageDialog from ‘@/common/compoents/message-window/message-window.vue’
export default {
data() {
return {
system: [{
title: 1111,
replaceTime: ‘2019-8-7’,
content: ‘1↵2↵3.↵4↵5↵6↵7↵8↵9↵10↵11↵12↵13↵14↵15↵↵’
}],
dialogContent: ”
}
},
methods: {
// 查看系统设置
showSystemDialog() {
this.dialogContent = this.system[index].content
Utils.$emit(‘is-show-message-mask’);
},
}
}
</script>
<style lang=”less”>
.systemboxItem {
padding: 8upx 30upx;
height: 100upx;
background-color: #fff;
box-sizing: border-box;
margin-bottom: 20upx;

.systemboxItemTop {
font-size: 30upx;

.systemboxItemTopRight {
float: right;
color: #A0A0A0;
}
}

.systemboxItemBottom {
margin-top: 10upx;
font-size: 25upx;
color: #A0A0A0;

.systemInformation {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 70%;
}

.redLittle {
border-radius: 50%;
width: 20upx;
height: 20upx;
background-color: #EF415C;
display: inline-block;
float: right;
margin-top: 7upx;
}
}
}
</style>
父组件

<template>
<view class=”dialog” @click=”dialogClose” v-if=”isShowDialog”>
<!– <view class=”dialog-block”> –>
<view class=”dialog-content” @click.stop=”” :class=”isShowMaskContent ? ‘show-dialog’ : ‘hide-dialog'”>
<scroll-view :scroll-y=”true” class=”dialog-list”>
<text>{{content}}</text>
</scroll-view>
<view class=”dialog-close iconfont iconfabu-guanbi1″ @click=”dialogClose”></view>
</view>
<!– </view> –>

</view>
</template>

<script>
import Utils from ‘@/common/js/center.js’;
export default {
props: [‘content’],
data() {
return {
isShowDialog: false, // 整个弹窗
isShowMaskContent: false, // 白色填充区域
}
},
methods: {
dialogClose() {
let that = this;
that.isShowMaskContent = false;
setTimeout(function() {
that.isShowDialog = false;
that.$forceUpdate();
}, 100);
},
},
mounted() {
let that = this;
// 显示遮罩
Utils.$on(‘is-show-message-mask’, () => {
that.isShowMaskContent = true;
that.isShowDialog = true;
});
}
}
</script>

<style scoped>
.dialog {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
position: fixed;
left: 0;
top: 0;
padding-top: 10vh;
}

.dialog-block {}

.dialog-content {
width: 500upx;
height: 80vh;
margin: 0 auto;
background: #FFF;
border-radius: 10upx;
overflow: hidden;
position: relative;
}

.dialog-close {
width: 40upx;
height: 40upx;
border-radius: 20upx;
position: absolute;
right: 10upx;
top: 10upx;
font-size: 26upx;
line-height: 40upx;
text-align: center;
}

.dialog-list {
padding: 40upx 20upx;
}

scroll-view {
width: 100%;
height: 100%;
}

.show-dialog {
animation: 100ms showDialog linear forwards;
}

.hide-dialog {
animation: 100ms hideDialog linear forwards;
}

@keyframes hideDialog {
0% {
opacity: 1;
}

,
100% {
opacity: 0;
}
}

@keyframes showDialog {
0% {
opacity: 0;
}

,
100% {
opacity: 1;
}
}
</style>

子组件（弹窗）