前言：
在前端开发的过程中，我们通常需要各种各样的提示框来显示一些成功、错误、警告等信息。而这些提示框的样式、交互有时候需要我们自己开发，但是我们通常不希望把大量的时间用于开发这些东西，因此我们使用了一系列的第三方库、插件。
在本文中，我们将介绍一款非常易用的 npm 包 - toast-vue ，它帮助我们快速搭建各种提示框，支持在 Vue.js 中使用，并且样式可以轻松定制。
toast-vue 的安装
我们可以使用如下的命令来安装 toast-vue ：
npm install toast-vue
当然，如果你想在自己的 Vue 初始化中使用这个组件，也可以在 Vue 初始化时进行全局注册：
------ --- ---- ----- ------ ----- ---- ----------- --------------
toast-vue 的使用
使用 toast-vue 就像使用 Vue 中的 built-in 组件一样简单。我们可以直接在 Vue 组件中使用该组件，而不需要引用其他的 JS 或 CSS 文件。
基本的 toast
----------
-----
------- -------------------------- ------------
------ --------------------
------
-----------
--------
------ ------- ---- -----------
------ ------- -
-------- -
----------- -
----------------------------- --------
-
--
----------- -
-----
-
-
---------这里我们只需要在 <template> 标签下使用一个 button 组件，同时还需要一个 组件，而 button 的 click 事件触发了我们通过 toast() 方法手动打开 toast 。
自定义 toast 样式
当然，如果想要定制自己的 toast 样式，那也是非常容易的。toast-vue 中提供了一些 CSS 类可以快捷地实现这一目的。
这里以定义一个 error 类型的 toast 样式为例：
CSS 样式
------ ------------ -
----------- -----
------ -----
-Vue 组件
----------
-----
------- -------------------------- ------------
------ --------------------
------
-----------
--------
------ ------- ---- -----------
------ ------- -
-------- -
----------- -
--------------------------------- ---- -------- -
---------- -------------
--
-
--
----------- -
-----
-
-
---------toast-vue 的参数
toast() 方法除了第一个参数外，还可以传递一些其他的参数，设置不同的风格，使用示例如下：
------------------------------- -
--------- -------- ----
---------- ------------------- ----
--------- ---- ------
------------------ --------
-
--总结
toast-vue 是一个非常实用的 Vue 组件，让我们可以快速搭建各种提示框，同时样式可以轻松定制。在开发过程中，最大的优点就是让我们可以快速开发出美观、交互友好的提示框，并大大提高了开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d9081e8991b448db50f