Vue：封装一个Toast

1.概述

Toast（吐司），一个短期弹出的会话，来告诉用户当前的操作是否合理。
据说是因为烤吐司的时候会冒出一阵烟，然后过会烟又消失了，所以就是Toast这名字的由来。奇怪的知识增加了~

---

2.组件式封装

在vue项目中，我们可以通过组件的方式来简单的封装一个Toast，具体以下几个步骤。

1.添加组件，写一个自己想要的风格

这里我的例子就如上一个简单的弹窗

2.在想用的组件内引用如上声明好的Toast子组件
引用

import Toast from "components/common/toast/Toast";

添加到组件

  components: {
   
    Toast,
  },

标签直接引用

<toast v-if='isshow'></toast>

此时我们就可以通过事件操作来更改属性isshow来是否显示Toast，还可以设置定时器来设置它的显示时间。

但是这样有一个明显的缺陷，就是每一个想用Toast的组件都得声明引用，会显得很繁琐且不优雅，所以更推荐下面这种方式：插件式封装

---

3.