前言
vue-easy-alert-wangzhy 是一个基于 Vue.js 的轻量级弹窗组件库。它提供了多种弹窗类型，包括消息框、警告框、确认框和加载框等，可以满足不同场景下的需求。
在本文中，我们将会详细介绍如何使用 vue-easy-alert-wangzhy，包括安装、引入、基本用法和高级用法。如果您正在寻找一款优秀的弹窗组件库，那么本文将为您提供帮助。
安装
在使用 vue-easy-alert-wangzhy 之前，需要先安装它。您可以使用 npm 进行安装，打开终端，运行以下命令：
--- ------- ---------------------- ------
引入
安装完成后，您需要在 Vue.js 中引入 vue-easy-alert-wangzhy。在您的 main.js 文件中，添加以下代码：
------ --- ---- ----- ------ ------------ ---- ------------------------ ------ ------------------------------------------------ ---------------------
上述代码中，我们使用了 import 关键字引入了 Vue.js 和 vue-easy-alert-wangzhy，并通过 Vue.use() 注册了 vue-easy-alert-wangzhy 组件。注意，我们还需要引入 vue-easy-alert-wangzhy 的样式文件，这样才能正常显示弹窗样式。
基本用法
引入了 vue-easy-alert-wangzhy 后，我们就可以在 Vue.js 中使用它了。下面我们将介绍 vue-easy-alert-wangzhy 的基本用法。
消息框
消息框（Message）用于显示用户操作的结果，比如保存成功、保存失败等。使用消息框时，您只需要调用 $message 方法即可，如下所示：
-------------------------
上述代码中，$message 是 vue-easy-alert-wangzhy 提供的方法，可以直接调用。您只需要传入一条消息即可。
警告框
警告框（Alert）用于提醒用户一些重要的信息，比如删除确认等。使用警告框时，您可以调用 $alert 方法，如下所示：
--------------------------- ------- - ------------------ ----- ----------------- ----- ----- --------- ---------- -- - -- ---- ----------- -- - -- ---- --
上述代码中，$alert 方法接收三个参数：提示内容、提示标题和提示选项。提示选项是一个对象，包含如下属性：
- confirmButtonText：确认按钮文本。
- cancelButtonText：取消按钮文本。
- type：提示框类型，包括 success（成功）、warning（警告）、info（信息）和 error（错误）。
您可以根据需要修改上述属性。
确认框
确认框（Confirm）用于提示用户确认操作，比如保存和提交等。使用确认框时，您可以调用 $confirm 方法，如下所示：
----------------------------- ------- - ------------------ ----- ----------------- ----- ----- ------ ---------- -- - -- ---- ----------- -- - -- ---- --
此处的 $confirm 方法与 $alert 方法类似，只是类型不同。您同样需要传入提示内容、提示标题和提示选项。
加载框
加载框（Loading）用于显示数据加载状态。使用加载框时，您可以调用 $loading 方法，如下所示：
--- --------------- - --------------- ----- --------- -------- ------------------ ----------- -------- -- -- ----- --
上述代码中，$loading 方法接收一个参数，是一个包含加载提示内容、加载动画和背景颜色的对象。您可以根据需要修改上述属性。
加载框还提供了 close 方法，用于关闭加载框，如下所示：
-----------------------
自定义框
如果您需要自定义弹窗，vue-easy-alert-wangzhy 也提供了相应的方法。您可以使用 $alert 方法来创建自定义弹窗，如下所示：
---------------------------------------------------- -------- - ------------------------- ---- --
上述代码中，我们在 $alert 方法中传入了一个包含标题和内容的 HTML 字符串，并指定了 dangerouslyUseHTMLString 为 true。这样就可以创建一个自定义的弹窗了。
高级用法
在上面的基础用法中，我们对 vue-easy-alert-wangzhy 进行了简单介绍。如果您想要深入学习 vue-easy-alert-wangzhy，您可以了解以下更高级的用法。
全局配置
如果您需要全局配置 vue-easy-alert-wangzhy，比如设置默认的按钮文本、动画、背景色等，可以在 main.js 文件中添加如下代码：
--------------------- - --------- ----- ---------- ----- ----------------- ----- ------------------ ----- ----- ---------- ------------ --------- -------- ------------------ ----------- -------- -- -- ----- --
上述代码中，我们在 Vue.use() 中传入了一个包含 vue-easy-alert-wangzhy 配置的对象，包括显示时间、是否显示关闭按钮、默认按钮文本、默认提示框类型、加载提示文本、加载动画和加载背景色等。您可以根据需要修改这些参数。
自定义主题
vue-easy-alert-wangzhy 提供了多种样式主题供用户选择。如果您不满足默认的样式，可以通过修改样式文件的方式进行自定义。
您可以通过修改 node_modules/vue-easy-alert-wangzhy/dist/vue-easy-alert.css 文件的方式自定义样式。在该文件中，您可以找到以下样式类：
- .el-easy-alert
- .el-easy-alert__header
- .el-easy-alert__title
- .el-easy-alert__message
- .el-easy-alert__footer
您可以修改这些样式类以达到自定义样式的目的。
按需引入
如果您只需要使用 vue-easy-alert-wangzhy 的部分功能，而不是全部功能，可以使用按需引入的方式进行优化。要实现按需引入，您需要安装 babel-plugin-component，运行以下命令：
--- ------- ---------------------- ----------
安装完成后，您需要将 .babelrc 文件中的内容修改为以下代码：
-
---------- -
--------------------- -
---------- -----
---
------------------------------
--
---------- -
-
------------
-
-------------- -------------------------
------------------- -----------------
-------------------------- -----
-
-
-
-上述代码中，我们引入了 babel-plugin-component，然后在 .babelrc 文件中配置了相应的参数。通过这种方式，可以按需引入所需要的组件，从而减小程序的体积。
示例代码
最后，我们提供一个示例代码，供您参考。您可以将以下代码复制到您的 Vue.js 项目中，然后启动项目体验 vue-easy-alert-wangzhy 的弹窗功能。
----------
---- -----------------------
---------- -------------- --------------------------------
---------- -------------- ------------------------------
---------- ----------- --------------------------------
---------- -------------- --------------------------------
---------- ------------- --------------------------------
------
-----------
--------
------ ------- -
-------- -
--------- -
-------------------------
--
------- -
--------------------------- ------- -
------------------ -----
----------------- -----
----- ---------
---------- -- -
-- ----
----------- -- -
-- ----
--
--
--------- -
----------------------------- ------- -
------------------ -----
----------------- -----
----- ------
---------- -- -
-- ----
----------- -- -
-- ----
--
--
--------- -
--- --------------- - ---------------
----- ---------
-------- ------------------
----------- -------- -- -- -----
--
------------- -- -
-----------------------
-- -----
--
-------- -
---------------------------------------------------- -------- - ------------------------- ---- --
-
-
-
---------
-------
--------------- -
-------- -----
---------------- -------
------------ -------
------- -----
-
---------- -
------- -----
-
--------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600560b381e8991b448def79