介绍
optimat-vue-alert-dialog 是一个 Vue 组件库，用于创建弹窗提示框，包括警告框、确认框等。该库使用简单，支持自定义样式和操作按钮。
安装
使用 npm 安装 optimat-vue-alert-dialog：
npm install optimat-vue-alert-dialog --save
使用
在 Vue 组件中引入 optimat-vue-alert-dialog：
-- -------------------- ---- -------
------ -------- ---- ---------------------------
------ ------- -
----------- -
--------
--
------ -
------ -
------- ----- -- ------
--
--
-------- -
-------------- -
----------- - -----
--
--------------- -
----------- - ------
--
-- --------
--------------- -
-------------------- ------- ---------
---------------------
--
-- --------
-------------- -
-------------------- ------ ---------
---------------------
-
-
--在模板中使用：
-- -------------------- ---- ------- ---------- ----------------- ------------- ------------------------ -------------------- ------------------- ---------------------------------------- -------------------------------------- ------------------------ ---------------------- --
API
Props
is-open(Boolean)：是否打开弹窗。title(String)：弹窗标题。message(String)：弹窗信息。confirm-text(String)：确认按钮文字。cancel-text(String)：取消按钮文字。confirm-button-class(String)：自定义确认按钮类名。cancel-button-class(String)：自定义取消按钮类名。
Events
confirm：确认按钮点击事件。cancel：取消按钮点击事件。
自定义样式
可以通过在父组件的样式中设置以下类名来自定义 AlertBox 的样式：
.alert-box-container：弹窗容器。.alert-box-title：弹窗标题。.alert-box-message：弹窗信息。.alert-box-confirm-button：确认按钮。.alert-box-cancel-button：取消按钮。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
----------
-----
------- ------------------------------------
----------
-----------------
-------------
------------------------
--------------------
-------------------
----------------------------------------
--------------------------------------
------------------------
----------------------
--
------
-----------
--------
------ -------- ---- ---------------------------
------ ------- -
----------- -
--------
--
------ -
------ -
------- ----- -- ------
--
--
-------- -
-------------- -
----------- - -----
--
--------------- -
----------- - ------
--
-- --------
--------------- -
-------------------- ------- ---------
---------------------
--
-- --------
-------------- -
-------------------- ------ ---------
---------------------
-
-
--
---------
-------
--------------- -
----------------- --------
------ -----
------- -----
-------------- ----
-------- --- -----
------- --------
-
-------------- -
----------------- -----
------ --------
------- --- ----- --------
-------------- ----
-------- --- -----
------- --------
-
--------总结
optimat-vue-alert-dialog 是一个轻量级的 Vue 组件库，能够帮助你快速构建弹窗提示框。开发者可以通过自定义样式和按钮操作，实现符合业务需求的弹窗提示框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b39