在前端开发中，有很多常用的库和工具，其中 npm 自然是不可或缺的一部分。evix 就是一款非常实用的 npm 包，它可以让我们更便捷地实现一些常用的效果，如模态框、通知消息等，本文将就 evix 的使用进行详细的介绍和指导。
安装
在使用 evix 之前，我们需要先进行安装。可以在终端中使用以下命令进行安装：
npm install evix
当然，我们也可以在 package.json 中添加依赖项并使用 npm install 进行安装。安装完成后，我们就可以在项目中使用 evix 了。
示例
下面通过一些具体的示例来介绍 evix 的使用。
模态框
模态框是页面中非常常见的一个效果，常常用于展示一些重要的信息或进行一些交互操作。使用 evix，我们可以非常便捷地实现一个模态框。
示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----------- ----- - ------------------
-------
------
------- -----------------------------
---- ---------- --------------
---- ----------------------
----- ----------------------------
----------------
------
------
------- ----------------------------------------------------
--------
--- ----- - -------------------- -
------------ -------------
------------- ---------
---
---------
-------
-------在这个示例中，我们创建了一个按钮来触发打开模态框的操作，并且在页面中定义了一个名为 modal 的 div 元素，并给它加上 class="modal" 的样式类。在 JavaScript 中，我们使用 evix.modal 方法来创建一个 modal 的实例，传入参数 '#modal' 表示这个 modal 是哪个 div 元素的模态框，其余参数用来指定打开和关闭模态框的操作，并作为对象传入。
通知消息
通知消息也是一种非常常见的效果，用于展示一些提示信息或警告信息。evix 为我们提供了一个创建通知消息的工具，下面是示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------- ------ - ------------------
-------
------
------- -----------------------------------
------- ----------------------------------------------------
--------
--- ------------ - --------------------
--------------------------------------------------- - ---------- -
--- ----- - ---------
--- ---- - ---------------
-------------------------- ----- - ---------- ---- ---
-
---------
-------
-------在这个示例中，我们创建一个按钮来触发显示通知的操作。在 JavaScript 中，我们使用 evix.notification 方法来创建一个 notification 的实例，然后通过调用 create 方法来创建一个通知。
应用实例
下面是一个比较完整的示例，我们结合使用模态框和通知消息来实现一个表单提交的效果：
-- -------------------- ---- -------
--------- -----
------
------
----------- ---- - ------------------
-------
------
----- ----------
------ ---------------------------
------ ----------- --------------- ------------- ---------
----
------ --------------------------
------ --------------- --------------- ------------- ---------
----
------- -------------------------
-------
------- ----------------------------------------------------
--------
--- ----- - -------------------- -
------------- ---------
---
--- ------------ - --------------------
--- ---- - --------------------------------
------------- - ----------- -
-------------------
--- -------- - ---------------------------
--- -------- - ---------------------------
-- ---------- -- ---------- -
------------------------- --------------
-------
-
-------------
--------------------- -
--------------
--------------------------- ------ - -------- - ------ - --------- - ---------- ---- ---
-------------
-- ------
-
---------
---- ---------- --------------
---- ----------------------
----- ----------------------------
--------------------
------
------
-------
-------在这个示例中，我们创建了一个表单，并为它定义了一个 onsubmit 事件处理函数。在事件处理函数中，我们首先使用 trim 方法来去掉输入框中的空格，并进行了一些简单的输入校验，如果输入框为空则弹出一条错误的通知消息。如果输入框不为空，则调用 modal 的 open 方法打开模态框，并使用 setTimeout 来模拟等待 2 秒钟的提交过程。在模拟提交过程结束后，调用 modal 的 close 方法关闭模态框，并弹出一条提交成功的通知消息，并重置表单。
总结
在本文中，我们介绍了 npm 包 evix 的基本用法，并通过多个示例演示了它的使用方法。evix 能够非常方便地实现模态框、通知消息等常用效果，使用时只需引入 evix 库即可，非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005524281e8991b448cfca1