caimei-applets-hehe/components/message-popup/message-popup.vue

<template>
    <view class="message-popup">
        <view class="mask" v-if="mask && visible"></view>
        <view class="content-popup">
            <uni-transition mode-class="fade" :show="visible">
                <view class="popup">
                    <view class="title"> {{ title }}<slot name="title"></slot> </view>
                    <view class="content">{{ content }} <slot name="content"></slot> </view>
                    <text class="close iconfont icon-iconfontguanbi" @click="$emit('close')"></text>
                </view>
            </uni-transition>
        </view>
    </view>
</template>

<script>
export default {
    name: 'message-popup',
    props: {
        title: {
            type: String,
            default: ''
        },
        content: {
            type: String,
            default: ''
        },
        mask: {
            type: Boolean,
            default: true
        },
        visible: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style lang="scss" scoped>
.message-popup {
    .mask {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9998;
        background: rgba(0, 0, 0, 0.6);
    }
    .content-popup{
        position: fixed;
        z-index: 9999;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-70%);
    }
    .popup {
        width: 580rpx;
        // min-height: 540rpx;
        box-sizing: border-box;
        padding: 60rpx 26rpx;
        background: #fff;
        border-radius: 16rpx;
        .close {
            position: absolute;
            right: 24rpx;
            top: 24rpx;
            font-size: 32rpx;
            color: #d4dd4;
        }
        .title {
            text-align: center;
            font-size: 30rpx;
            color: #333333;
            margin-bottom: 54rpx;
        }
        .content {
            font-size: 26rpx;
            color: #666666;
        }
    }
}
</style>