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>

父组件