简介
vue-alertify 是一个基于 Vue.js 的弹框组件库，并且具有丰富的样式组装，可以快速且方便地自由使用弹框组件。本文将介绍 npm 包 vue-alertify 的使用方法，方便初学者了解该组件库的基本用法。
安装
在使用 vue-alertify 进行开发之前，先通过 npm 安装它。在命令行中执行如下命令：
npm install vue-alertify --save
引入
引入 vue-alertify：
import VueAlertify from 'vue-alertify'
在 Vue 项目中直接使用 VueAtify 组件：
Vue.use(VueAlertify)
基本用法
VueAlertify 组件是一个具有丰富 API 的弹框组件集合。它可以创建消息框、确认框、提示框和输入框等多种类型的弹框。下面是它的基本用法：
-- -------------------- ---- -------
----------
-----
------- --------------------- ----- -----------
------- ----------------------- ------- -----------
------- ---------------------- ------ -----------
------
-----------
--------
------ ------- -
-------- -
----------- -
-------------------------- ----- -----
--
------------- -
---------------------------- ------- -----
--
------------ -
--------------------------- ------ -----
-
-
-
---------在上面的代码中，我们使用了 VueAlertify 的三个方法来分别创建 alert、confirm 和 prompt 弹框。它们分别是:
this.$alertify.alert(messageText, callback)this.$alertify.confirm(messageText, callback)this.$alertify.prompt(messageText, callback)
其中的 messageText 是需要显示的文本，callback 是回调函数，点击确定按钮时会将确认信息带入回调函数中。
参数配置
VueAlertify 还可以通过配置参数来实现更丰富的功能。例如，可以通过配置 logPosition 参数来更改消息框的位置。下面是一个设置 logPosition 参数的示例代码：
-- -------------------- ---- -------
----------
-----
------- --------------------- ----- -----------
------- ----------------------- ------- -----------
------- ---------------------- ------ -----------
------
-----------
--------
------ ------- -
--------- -
------------------------------ ----------- ------------
--
-------- -
----------- -
-------------------------- ----- -----
--
------------- -
---------------------------- ------- -----
--
------------ -
--------------------------- ------ -----
-
-
-
---------在上述代码中，我们使用了 $alertify.set() 方法来设置位置参数。notifier 是消息框类型，position 是位置，可以是 top-left、top-right、bottom-left、bottom-right 和 center。
此外，还可以通过设置 theme 来更改消息框的主题。
-- -------------------- ---- -------
----------
-----
------- --------------------- ----- -----------
------- ----------------------- ------- -----------
------- ---------------------- ------ -----------
------
-----------
--------
------ ------- -
--------- -
--------------------------- ---------
--
-------- -
----------- -
-------------------------- ----- -----
--
------------- -
---------------------------- ------- -----
--
------------ -
--------------------------- ------ -----
-
-
-
---------在这个示例中，我们使用了 $alertify.set() 方法设置了消息框的主题 modern。
总结
VueAlertify 是一个方便的弹框组件库，并且具有丰富的参数配置。开发者可以根据自己的需求，灵活地配置弹框组件，完成丰富的 UI 页面。同时，学习使用 VueAlertify，对学习 Vue.js 也是一种很好的启发。通过本文的介绍，初学者可以更好地掌握 VueAlertify 的基本使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e7d9381d61a3540b55