实现element $message

message.js

import Message from './message.vue'

export default {
    install(Vue) {
        const Profile = Vue.extend(Message)

        // 弹出弹窗
        Vue.prototype.$message = function(params) {
            const instance = new Profile()
            let timer = 500
            for (const key in params) {
                if (Object.hasOwnProperty.call(params, key)) {
                    const value = params[key]
                    instance[key] = value
                    if (key === 'timer') {
                        timer = value
                    }
                }
            }
            instance.vm = instance.$mount()
            setTimeout(() => {
                document.body.appendChild(instance.vm.$el)
                setTimeout(() => {
                    Vue.prototype.$closeMessage()
                }, timer)
            })
            return instance
        }

        // 关闭弹窗
        Vue.prototype.$closeMessage = function() {
            const instance = new Profile()
            instance.vm = instance.$mount()
            const message = document.body.lastElementChild
            if (!message) return
            document.body.removeChild(message)
            return instance
        }
    }
}

message.vue

<template>
    <view class="message flex-center">
        <view class="icon success" v-show="type==='success'" />
        <view class="icon circle" v-show="type==='circle'" />
        <view class="content">
            {{message}}
        </view>
    </view>
</template>

<script>
    export default {
        name: 'Message',
        props: {
            message: {
                type: String,
                default: ''
            },
            timer: {
                type: Number,
                default: 1000
            },
            type: {
                type: String,
                default: ''
            }
        },
    }
</script>
<style lang="scss" scoped>
    .message {
        padding: 25rpx 40rpx;
        // height: 80rpx;
        background: rgba(0, 0, 0, 0.80);
        border-radius: 10rpx;
        font-size: 30rpx;
        color: #FFFFFF;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .icon {
            width: 28rpx;
            height: 28rpx;
            background-color: #FFFFFF;
            border-radius: 50%;
            margin-right: 10rpx;
            position: relative;
        }

        .success::before {
            position: absolute;
            content: " ";
            width: 6rpx;
            height: 12rpx;
            transform: rotate(45deg);
            border-right: 2rpx solid #333;
            border-bottom: 2rpx solid #333;
            top: 6rpx;
            left: 10rpx;
        }

        .circle {
            border-radius: 50%;
            border: 2rpx solid #FFFFFF;
            background-color: transparent;
            border-left-color: transparent;
        }
    }
</style>