<template>
<div class="toast">
<p>服务器错误，请稍后重试</p>
</div>
</template>
<script>
export default {
name: "Toast",
mounted() {
setTimeout(() => {
// 3s 后通过父级移除子元素的方式来移除该组件
this.$el.parentNode.removeChild(this.$el);
}, 3000);
}
};
</script>
<style lang="scss" scoped>
.toast {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
z-index: 9999;
background: transparent;
> p {
padding: 12px 22px;
font-size: 18px;
border-radius: 4px;
background: rgba(17, 17, 17, 0.7);
}
}
</style>
上面的内容想必大家应该都能看懂，所以这里就直接讲下面的重点了。
写一个 main.js
我们在 main.vue 的同级目录下新建一个 main.js 文件。我们先瞟一眼文件内容（也不多，已经是个最简版了）👇：
// main.js
import Vue from "vue"; // 引入 Vue 是因为要用到 Vue.extend() 这个方法
import Main from "./main.vue"; // 引入刚才的 toast 组件let ToastConstructor = Vue.extend(Main); // 这个在前面的前置知识内容里面有讲到
let instance;
const Toast = function() {
instance = new ToastConstructor().$mount(); // 渲染组件
document.body.appendChild(instance.$el); // 挂载到 body 下
};
export default Toast;
。
上面的代码暴露了一个 Toast 函数。为什么要暴露一个函数呢？原因很简单：你想想，我们最终是不是要根据 this.$toast() 来调用一个组件，说白了，通过 js 调用，本质就是调用一个 函数。也就是说 this.$toast() 就是执行了上面代码中导出的 export default Toast，也就是执行了 Toast 函数（const Toast = function() {}），所以当我们调用 this.$toast() 的时候其实就是执行了 Toast() 函数。而 Toast() 函数只做了一件事情：就是通过手动挂载的方式把组件挂载到 body 下面。
补充一下🤐：一般来说我们常见的是 $mount(“#app”)，也就是把组件挂载到 #app 下面，<router-view /> 也包含在 #app 中，但是我们这种 toast 提示是放在 body 下面的，也就是说它不受 #app 和 <router-view /> 的管控，所以当我们切换页面（路由）的时候，这个 toast 组件是不会跟着立马消失的，这点要注意哦😯。
这里顺便给个组件的目录结构，如下图所示：
开始调用
调用方式很简单，首先我们在入口文件 main.js（和上面不是同一个😢） 里加上两行代码，这样我们就能在需要的地方直接用 js 调用它了，如下图所示：
