yshi/fuintUniapp/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue

<template>
    <view class="uni-popup-message">
        <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
            <slot>
                <text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
            </slot>
        </view>
    </view>
</template>

<script>
    import popup from '../uni-popup/popup.js'
    /**
     * PopUp 弹出层-消息提示
     * @description 弹出层-消息提示
     * @tutorial https://ext.dcloud.net.cn/plugin?id=329
     * @property {String} type = [success|warning|info|error] 主题样式
     *  @value success 成功
     *     @value warning 提示
     *     @value info 消息
     *     @value error 错误
     * @property {String} message 消息提示文字
     * @property {String} duration 显示时间，设置为 0 则不会自动关闭
     */

    export default {
        name: 'uniPopupMessage',
        mixins:[popup],
        props: {
            /**
             * 主题 success/warning/info/error      默认 success
             */
            type: {
                type: String,
                default: 'success'
            },
            /**
             * 消息文字
             */
            message: {
                type: String,
                default: ''
            },
            /**
             * 显示时间，设置为 0 则不会自动关闭
             */
            duration: {
                type: Number,
                default: 3000
            },
            maskShow:{
                type:Boolean,
                default:false
            }
        },
        data() {
            return {}
        },
        created() {
            this.popup.maskShow = this.maskShow
            this.popup.messageChild = this
        },
        methods: {
            timerClose(){
                if(this.duration === 0) return
                clearTimeout(this.timer) 
                this.timer = setTimeout(()=>{
                    this.popup.close()
                },this.duration)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .uni-popup-message {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: center;
    }

    .uni-popup-message__box {
        background-color: #e1f3d8;
        padding: 10px 15px;
        border-color: #eee;
        border-style: solid;
        border-width: 1px;
        flex: 1;
    }

    @media screen and (min-width: 500px) {
        .fixforpc-width {
            margin-top: 20px;
            border-radius: 4px;
            flex: none;
            min-width: 380px;
            /* #ifndef APP-NVUE */
            max-width: 50%;
            /* #endif */
            /* #ifdef APP-NVUE */
            max-width: 500px;
            /* #endif */
        }
    }

    .uni-popup-message-text {
        font-size: 14px;
        padding: 0;
    }

    .uni-popup__success {
        background-color: #e1f3d8;
    }

    .uni-popup__success-text {
        color: #67C23A;
    }

    .uni-popup__warn {
        background-color: #faecd8;
    }

    .uni-popup__warn-text {
        color: #E6A23C;
    }

    .uni-popup__error {
        background-color: #fde2e2;
    }

    .uni-popup__error-text {
        color: #F56C6C;
    }

    .uni-popup__info {
        background-color: #F2F6FC;
    }

    .uni-popup__info-text {
        color: #909399;
    }
</style>