目标

this.$Toast('全局toast',1500);

组件封装

<!-- Toast全局组件 toast.vue -->
<template>
    <div v-show="toast && title" class="toast-all">
        <span class="toast-all-title" v-html="title"></span>
    </div>
</template>

<script>
export default {
    name: 'Toast',
    data() {
        return {
            title: '',
            toast: false
        }
    }
}
</script>

<style lang="scss" scoped>
.toast-all {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,0.8);
    border-radius: 8px;
    padding: 8px 12px;
    box-sizing: border-box;
    dispaly: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    &-title {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
    }
}
</style>

plugins配置（在目录plugins下建toast.js）

// toast.js
import Toast from '@/components/global/toast.vue';// 引入先前写好的vue
import Vue from 'vue';

// 注册Toast
// 生成一个Vue的子类
const ToastConstructor = Vue.extend(Toast);
// 生成一个该子类的实例
const instance = new ToastConstructor();

// 将这个实例挂载在我创建的div上
// 并将此div加入全局挂载点内部
instance.$mount(document.createElement('div'));
document.body.appendChild(instance.$el);

// 通过Vue的原型注册一个方法
// 让所有实例共享这个方法 <br>    // 其中的duration是持续时间
Vue.prototype.$Toast = (title, duration = 2000) => {
    instance.title = title;
    instance.toast = true;
    setTimeout(() => {
        instance.toast = false;
    }, duration);
};

nuxt.config.js下配置plugins

<!-- nuxt.config.js -->
plugins: [
    //  将在plugins下配置的toast.js在此处引用
    {
        src: '~/plugins/toast',
        ssr: false
    }
],