简介
在前端项目开发中，需要对用户的交互过程进行处理以提供更好的用户体验。其中，通知（notification）是一种很常见的交互方式。而 @deveodk/vue-notification 就是一个非常好用的通知库，可以便捷地添加通知功能。
本文将介绍如何使用 @deveodk/vue-notification，教程详实、代码示例丰富，在使用该库时将会有很大的帮助。
安装
安装 @deveodk/vue-notification 可以使用 npm，直接在终端输入以下命令：
npm install --save @deveodk/vue-notification
使用
引入方式
在需要使用通知的组件中，需引入@deveodk/vue-notification:
import Notifications from '@deveodk/vue-notification' Vue.use(Notifications)
组件式调用
可以通过在 component 中注册 notification 组件的方式快速使用：
<notification :group="group" :content="content" :type="type" :duration="duration" :speed="speed" />
其中，参数的含义如下：
group：通知组（可选）。 content：通知内容。 type：通知类型，有 success、warning、info、error 四种类型可选，默认为 info。 duration：通知显示时间，默认为 5000 毫秒。 speed：通知显示速度，即出现和消失的速度，默认为 300 毫秒。
全局调用
如果希望在全局都可以使用通知功能，则可以在 main.js 中进行如下配置：
import Notification from '@deveodk/vue-notification' Vue.prototype.$notify = Notification
此时，在任意位置均可以进行如下调用：
this.$notify({
content: 'Hello, Vue!',
type: 'success'
})常规使用方式
-- -------------------- ---- -------
----------
------- --------------------------------
-----------
--------
------ ------- -
-------- -
-------- -
--------------
-------- ---------
----- ---------
--
-
-
-
---------上述示例代码，点击按钮调用 notify 方法时触发通知展示。
多通知示例
-- -------------------- ---- -------
----------
-----
------- --------------------------------------------
------- --------------------------------------------
------- -----------------------------------------
------- ------------------------------------------
---- -------------- ------ -- ---------- ----------------
-------------
-----------------
--------------------
------------------------
------------------
------------------------------
-
---------------
------
------
-----------
--------
------ ------- -
------ -
------ -
---------- --
-
--
-------- -
-------------- -
---------------------
--- --------------------- - --
------ --------
-------- ------- - -----
----- -----
--------- -----
------ ---
--
--
--------------- -
-------------- - --------------------------- -- -------- --- ---
-
-
-
---------上述示例代码，点击按钮新增通知展示，并支持在通知上点击关闭按钮移除该通知。
总结
@deveodk/vue-notification 是一个功能强大，易用性高的通知库。本文介绍了它的使用方法，包括组件式调用以及全局调用的使用方式，还提供了多通知示例，让读者更好的理解和应用该库。
虽然本文只是介绍了该库的基本使用方法，但是通过细心学习，读者会发现该库还有很多高级用法，可满足不同的需求。
我们相信，通过阅读本文，读者已经感受到了该库的强大和便捷性。我们期待更多的开发者加入到 Vue 生态建设的行列中，共同创造更好的前端生态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ada81e8991b448d877a