在之前的文章中，我们分享了如何快速实现自己需要的全局弹框组件。在Vue项目开发中，特别是H5页面的项目中，还有一个非常常用的组件，它相对于弹框来说没有那么大，并且不需要手动关闭，在需要更简洁地提示用户一些信息时非常实用，它就是toast提示组件。

接下来，我们将带领大家手写一个全局的toast提示组件，当你在项目任何地方需要使用时，都可以直接调用。

查看往期文章： 十五分钟两百行代码，手写一个vue项目全局通用的弹框

第一步：新建文件夹及主要文件

在Vue项目中，一般我们会将公用组件放在src/components目录下，因此我们直接在src/components/toast下新建如下两个文件：

1. index.vue：该文件是toast组件的内容，与编写普通vue组件一样，包含toast的结构、样式以及基础逻辑；
2. index.js：注册index.vue组件为全局组件。由于该组件不需要手动关闭，并且涉及到添加元素和自动删除元素，因此该文件会有一些元素层面上的操作和逻辑，相对上期的弹框组件的index.js文件来说会相对复杂些，我们下边会逐行讲解，当然也会提供完整代码，请往下看。

第二步：书写组件内容

index.vue组件内容如下：

1. 结构 + js 代码

代码说明：

• 我们这里用到了Vue的transition组件，用于包裹需要动画效果的元素。name="appear" 指定了使用名为 "appear" 的过渡效果；
• 这句代码是我们toast的主要内容，通过v-html + msg来动态属性来插入，msg在index.js 中修改;
• methods：定义组件的方法。
  • open()：异步方法，用于显示Toast。如果已显示，则直接返回；否则设置show为true并调用close()方法等待其完成。
  • close()：返回一个Promise，该Promise在time毫秒后解决，同时将show设置为false，从而隐藏Toast。

1. 样式

第三步：注册成全局组件

import { createApp } from 'vue';
import ToastComponents from './index.vue';

const LayerToastId = 'layer-Toast-wrapper';

let Toast = async function (msg, time) {
  time = time || 2000;

  let ToastEl = document.getElementById(LayerToastId);
  if (ToastEl) {
    return;
  }
  const div = document.createElement('div');
  div.setAttribute('id', LayerToastId)
  document.body.appendChild(div);
  let layerToastEl = createApp(ToastComponents).mount('#' + LayerToastId);
  layerToastEl.msg = msg;
  layerToastEl.time = time;
  let hasClosed = await layerToastEl.open();
  if (hasClosed) {
    setTimeout(() => {
      document.body.removeChild(div);
    }, 400);
  }
};
export default {
  install (app) {
    app.config.globalProperties.$toast = Toast;
  }
}

到这里，我们的弹框组件就完成了。下边我们对一些比较重要的代码做个解释：

• let Toast = async function 这里表示Toast消息，我们把它注册成一个异步函数，因为内部需要使用到定时器控制定时移除消息容器；
• let layerToastEl = createApp(ToastComponents).mount('#' + LayerToastId); 这句代码的意思是：把我们引入的index.vue文件创建成一个Vue的应用实例，并挂载到新创建的div上。

// 引入 Vue 的 createApp 函数，用于创建 Vue 应用实例
import { createApp } from 'vue';
// 引入 Toast 组件
import ToastComponents from './index.vue';

// 定义一个常量，用于存储 Toast 组件的容器元素的 ID
const LayerToastId = 'layer-Toast-wrapper';

// 定义一个异步函数 Toast，用于显示 Toast 消息
let Toast = async function (msg, time) {
  time = time || 2000;

  let ToastEl = document.getElementById(LayerToastId);
  if (ToastEl) {
    return;
  }
  const div = document.createElement('div');
  div.setAttribute('id', LayerToastId)
  document.body.appendChild(div);
  let layerToastEl = createApp(ToastComponents).mount('#' + LayerToastId);
  layerToastEl.msg = msg;
  layerToastEl.time = time;
  let hasClosed = await layerToastEl.open();
  if (hasClosed) {
    setTimeout(() => {
      document.body.removeChild(div);
    }, 400);
  }
};

export default {
  install (app) {
    app.config.globalProperties.$toast = Toast;
  }
}

项目中使用弹框

使用就非常简单便利了，主要有以下几种用法：

1. Vue2 中使用：

// Vue2 中简单使用
this.$toast("Toast提示在Vue2项目中的简单使用"));

// Vue2中需要在提示后有进一步操作：可以任何你想的逻辑，包括发接口、页面处理等。
await this.$toast("Toast提示在Vue2项目中使用后有后续逻辑", 3000);
handleFunction(); // 这里的函数代表提示后的逻辑代码

1. Vue3 中使用：

// 在 Vue3 中使用时需要先引入app
import { app } from "@/main";

// Vue3 中简单使用
app.config.globalProperties.$toast("Toast提示在Vue3项目中的简单使用", 3000);

// Vue2中需要在提示后有进一步操作：可以任何你想的逻辑，包括发接口、页面处理等。
app.config.globalProperties.$toast("Toast提示在Vue3项目中使用后有后续逻辑");
handleFunction(); // 这里的函数代表提示后的逻辑代码

说明：

• 我们可以在使用时传入合适的显示停留时间，如果为传入，则按默认的2000毫秒显示；
• 在Vue3中，你也可以把 $toast 重新保存一下，后续不用每次都写很长的 app.config....

import { app } from "@/main";

const toast = app.config.globalProperties.$toast

toast("简便地使用toast提示");

toast图片示例

说明：在停留2000毫秒（或者我们设置的停留时间）之后会自动关闭。

写在后面

这是一个比较基础和通用的黑色半透明提示消息，这边示例的代码是比较全的，对细节要求不大的小伙伴可以直接抄作业；

背景颜色、字体、布局等这些细节，因为每个业务场景不同，大家可以根据自己的需要适当调整；

通过修改结构和样式代码，你可以让消息的样式变得更加丰富或者更符合你的业务需求；

消息组件我们一样是使用固定单位的，如果小伙伴的项目需要使用响应式大小，直接对应替换大小单位（rem、vw）即可；

对你有帮助的话给作者点点关注吧，你的支持是我不断更新的动力！Peace and love~~