在前端开发中，常常需要使用到一些弹窗提示来提醒用户。而自己写一个组件太费时间，此时就可以用到一个非常方便的 npm 包，即 vue-toast-plugin-catbea。
介绍
vue-toast-plugin-catbea 是一个基于 Vue.js 2.x 的弹窗提示组件，支持多种类型的提示信息、自定义样式和提示时间。
安装
使用 npm 进行安装：
npm install vue-toast-plugin-catbea --save
然后在 Vue 项目中使用：
import Vue from 'vue'; import Toast from 'vue-toast-plugin-catbea'; Vue.use(Toast);
使用
在 Vue 组件中，我们可以使用 this.$toast 来调用弹窗提示方法，方法传入一个对象参数，包含以下属性：
- text：提示文字内容（必填）
- type：提示类型，可选值为 success、warning、info、error，默认为 success。
- duration：提示显示时间，单位毫秒，默认为 3000 毫秒。
- position：提示显示位置，可选值为 top、middle、bottom，默认为中间显示。
- className：自定义样式类名。
下面是一个基本的例子：
-- -------------------- ---- -------
----------
-----
------- ----------------------------------
------
-----------
--------
------ ------- -
-------- -
----------- -
-------------
----- ---------
----- ----------
--------- -----
--------- ------
---------- --------------
---
-
-
--
---------上面代码中，我们定义了一个按钮点击事件，点击后会弹出一个包含文字内容为“这是一条提示”的成功类型的提示框，然后 2 秒钟后自动消失。提示框显示在顶部，同时使用了自定义的样式 custom-toast。
高级用法
在 vue-toast-plugin-catbea 中，还有一些高级用法。
手动关闭弹窗
如果需要手动关闭弹窗，可以调用 $toast.close() 方法：
this.$toast.close();
禁用遮罩层
在默认设置下，会在页面上添加一个半透明的遮罩层。如果不需要遮罩层，可以在引用插件时，添加一个 options 配置项：
import Vue from 'vue'
import Toast from 'vue-toast-plugin-catbea'
const options = {
opacity: 0
}
Vue.use(Toast, options)这里的 options 选项中，我们将 opacity 设置为 0，就可以禁用遮罩层了。
配置全局的弹窗
如果希望在全局范围内应用同一种提示框样式，可以在 main.js 中配置全局的 toast，例如：
import Vue from 'vue'
import Toast from 'vue-toast-plugin-catbea'
Vue.use(Toast, {
defaultType: 'warning',
duration: 2500,
position: 'bottom'
})这里的配置项包括：defaultType（默认的提示类型）、duration（提示显示时间）和 position（提示显示位置）。
总结
vue-toast-plugin-catbea 是一个非常方便的弹窗提示组件，使用非常简单。但是在实际开发中，我们可能需要根据实际需求进行一些高级的配置，例如禁用遮罩层或者在全局范围内配置提示框样式。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5281e8991b448ebd4c