Vue实现全局的toast组件

1.创建toast组件

<template>
    <div class="toast" v-if="show">
        {{ msg }}
    </div>
</template>

<style scoped>
    .toast{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 3px;
        max-width: 200px;
        padding: 10px;
        background: #333;
        color: #fff;
        font-size: 14px;
        opacity: .9;
        text-align: justify;
        word-break: break-all;
        word-wrap: break-word;
    }
</style>

2.创建toast.js文件

import toast from "@/components/toast"
export default (Vue) => {
    let toastComp = Vue.extend(toast);
    function showToast(msg , duration = 3e3){
        let toastDom = new toastComp({
            data(){
                return{
                    show:true,
                    msg
                }
            }
        }).$mount()
        document.body.appendChild(toastDom.$el);
        setTimeout(() => {
            toastDom.show = false
        }, duration)
    }
    Vue.prototype.$toast = showToast;
}

3.安装并使用

import toast from "@/plugins/toast";
Vue.use(toast);


// 组件里面使用
this.$toast("message");