前言
在前端开发中，我们经常需要使用提示框来向用户展示重要信息。而 custom-notification 就是一个方便、易用的 npm 包，可以帮助我们快速创建并展示各种类型的提示框。下面，我们就来详细了解一下它的使用方法。
安装
首先，我们需要安装 custom-notification。在终端中输入以下命令：
npm install custom-notification
使用方法
引入
在需要使用 custom-notification 的组件中，首先需要引入它。在 Vue 项目中，可以在 main.js 中引入：
import Vue from 'vue' import customNotification from 'custom-notification' Vue.use(customNotification)
这样，customNotification 就会被成功注册到 Vue 插件中了。
使用
在引入成功后，我们就可以在各个组件中使用 this.$notify 这个方法，来进行提示框的创建和展示。
使用 this.$notify 方法时，可以传递一个对象作为参数，这个对象包含以下属性：
type：提示框的类型，可以是'success'、'warning'、'info'或'error'中的任意一个。content：提示框的内容，可以是文本信息或 HTML 代码。duration：提示框展示的时间，单位是毫秒，设置为 0 时表示不会自动关闭，需要手动关闭。
示例代码：
-- -------------------- ---- -------
----------
------- ------------------------------------------
-----------
--------
------ ------- -
-------- -
------------------ -
--------------
----- ----------
-------- -----------------------------
--------- ----
--
-
-
-
---------自定义选项
除了上面介绍的三个必选项，我们还可以使用其他选项来自定义提示框的样式和行为。
例如，我们可以对提示框的标题和位置进行修改、对弹出动画进行设置等。完整的自定义选项可以参考官方文档。
示例代码：
-- -------------------- ---- -------
----------
------- ------------------------------------------
-----------
--------
------ ------- -
-------- -
------------------ -
--------------
----- ----------
-------- -----------------------------
--------- -----
------ -------
--------- ------------
-------- --------
--
-
-
-
---------结语
custom-notification 是一个十分方便、易用的 npm 包，可以帮助我们快速创建各种类型的提示框。在实际项目中，我们可以根据需要来进行自定义，以达到最佳的使用效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66ed6