前言
在前端开发中，出现提示信息是很常见的需求，但是每个项目都从头开始写一个提示组件显然是不现实的。此时，我们可以使用一个开源的、易用的、可配置的提示插件——Vue-Simple-Toaster。
Vue-Simple-Toaster 是一个前端工具包，它提供了一个轻量级的、无需依赖其他库的 VueJS 组件，旨在为 VueJS 应用提供简单的通知和提示。
特性
- 灵活性：可以自定义组件
- 易于使用：简单的 API
- 强大的配置：可以轻松自定义多种样式
- 无误差：100% 代码覆盖率
- 全面的浏览器支持：支持所有现代浏览器
安装
你可以使用 npm 安装 Vue-Simple-Toaster。
npm install vue-simple-toaster --save
使用
在 main.js 中导入：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------- ---- -------------------- ------ ------------------------------------- ---------------- --- ----- ------- - -- ------- -----------------
在需要调用的组件中，使用 this.$toaster 对象调用组件。
this.$toaster.success('This is a success message')除了 success 方法，还支持其他几种类型的方法：
errorwarninginfo
配置
使用 Vue-Simple-Toaster 的默认配置十分简单，但如果要在不同的应用程序中进行不同的通知，您还可以轻松自定义样式和其他配置属性。
在 main.js 中添加如下代码来定义全局配置：
-- -------------------- ---- ------- ---------------- - --------- ------------ --------- ----- ---------- -------- --------------- ------------------ --------- ------ ----- ----- ----- ---------- ---------- ------ ------ ------ ----------- --- --------------- --- ------ ----- ----- ------ --------------- -- --
在上面的示例中，我们可以看到一些自定义属性：
position: 提示组件在页面的位置duration: 提示时间className: 提示组件的 CSS 类名containerClass: 容器组件的 CSS 类名iconPack: 图标库，支持 font-awesome 和 material-design-iconsicon: 图标名称type: 提示类型singleton: 是否允许多个同时显示clear: 是否强制清空所有内容toastStyle: 提示样式containerStyle: 容器样式title: 提示标题font: 是否使用默认字体closeAnimation: 关闭动画样式
自定义
你可以通过如下方式，自定义修改提示组件。
自定义HTML
-- -------------------- ---- -------
----------
---- ---------------------
---- ----------------- -------------- ------------ --------------------
---- ----------------- -------------------
-- ------------------ -----------
------
---- ------------------ ---------------------- ----------- --------
---- --------------------- -------------------- -------------- -----------------------------
---- ------------------------ ------------------- -------------------------
-- ------------------ -----------------------
------
------
------
-----------
--------
------ ------- -
------ --------- ----------- ------------
--------- -
--------------- -
------ ------------------------
--
------------ -
------ --------------------- -- --
--
------------ -
------ --------------------- -- --
--
-------------- -
------ ----------------------- -- --
--
------------- -
------ ---------------------- -- --
-
--
-------- -
------------ -
------------------------
-
-
-
---------
------ -------
------------- -
-------- -----
---------------- -------
------------ -------
------ -----
------- -----
--------------- -----
-
------------- ------ -
-------- -----
--------------- ----
------------ -------
----------- -----
-------------- ----
----------- - --- ---- ---------------
----------- --- ---- ------------
------- ----
--------------- ----
-
------------- ------------ -
------------ ----
-
------------- ----------- - -
---------- -----
------------- -----
-
------------- ------------ - -
---------- -----
------- --------
------------- -----
-
--------自定义配置对象
-- -------------------- ---- -------
------ ----------- ---- ---------------
---------------- -
--------- ------------
--------- -----
---------- ---------------
--------------- ------------------
--------- ---------
----- ---
----- ---
---------- ------
------ ------
----------- ---
--------------- ---
------ ---
----- ------
--------------- ---
---------------- -
------- -
-------- ------------
------ ----------
-------- ------------
----- --------
-
-
--如果你使用 icon 属性来指定图标，它将在自定义图标字典中以该名称引用。
不过需要注意的是，自定义图标的名称不能和默认图标库的名称一样，不然默认库的大概率会覆盖你的自定义图标。
结语
Vue-Simple-Toaster 提供了强大的能力，可以帮助你更方便地实现提示功能，极大的提高了我们的工作效率。希望这篇文章能够帮助到初学者，让他们能够快速入门，并能够在实际项目中得到实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bca81e8991b448d966d