<template>

    <div class="message" v-if="isShow">

        <span>{{message}}</span>

    </div>

</template>

<script>

export default {

    created () {

        console.log(this.message)

    },

    props:{

       message:{

            type:String,

            default:"成功"

       },

       isShow:{

           type:Boolean,

           default:true

       }

    },

    methods:{

        close(){

            this.isShow=false

        }

    }

}

</script>

import MsgCom from "./message.vue";

const message = {};

//Vue中用install来定义插件

message.install = function (Vue) {
　　//避免重复install
　　if(message.installed)return;　　

    //通过Vue.extend创建一个Vue的子类

    const MessageInstance = Vue.extend(MsgCom);

    let currentMsg;

    const initInstance = () => {

        //实例化vue子类

        currentMsg = new MessageInstance();

        //获取子类的挂载点

        let msgEl = currentMsg.$mount().$el;

        //将子类的挂载点挂载在页面上

        document.body.appendChild(msgEl);

    };

    //在Vue的原型上添加实例，以全局调用

    Vue.prototype.$msg = {

        //在实例上创建方法调用插件

        showMsg(options) {

            if (!currentMsg) {

                initInstance();

            }

            //将页面的对象传给currentMsg对象

            Object.assign(currentMsg, options);

            setTimeout(() => {

                currentMsg.close();

            }, );

        }

    }

}

export default message;

import Message from "./publish/message";

Vue.use(Message);