npm 包 @beisen-phoenix/modal 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发中，弹窗是个很常见的交互体验。而 @beisen-phoenix/modal 是一款弹窗组件，它提供了灵活、易用的 API，能够帮助你快速实现各种类型的弹窗。

安装

你可以使用 npm 或 yarn 安装 @beisen-phoenix/modal：

使用 npm：

npm install @beisen-phoenix/modal --save

使用 yarn：

yarn add @beisen-phoenix/modal

快速上手

在使用 @beisen-phoenix/modal 之前，你需要先引入它：

import Modal from '@beisen-phoenix/modal';

创建一个简单的弹窗：

const modal = new Modal({
  title: '提示',
  body: '这是一个弹窗',
});

modal.show();

很简单吧！这个弹窗只有一个标题和正文。modal.show() 能够将弹窗渲染到页面上。

API

@beisen-phoenix/modal 支持多种类型的弹窗，包括 alert、confirm、prompt、loading 等。同时，它还提供了丰富的 API，能够帮助你更好地控制弹窗的行为。

Modal(options)

创建一个弹窗实例。

参数

options:
- title { String }：弹窗标题
- body { String }：弹窗正文
- type { String }：弹窗类型，可选值为：alert、confirm、prompt、loading，默认为 alert
- message { String }：弹窗消息，仅在 type 为 prompt 时生效
- placeholder { String }：输入框的占位符，仅在 type 为 prompt 时生效
- mainText { String }：主要按钮文本
- secondaryText { String }：次要按钮文本
- onConfirm { Function }：点击主要按钮时的回调
- onCancel { Function }：点击次要按钮或弹窗遮罩层时的回调
- onComplete { Function }：弹窗完成后的回调

实例方法

show()

将弹窗渲染到页面上。

hide()

隐藏弹窗。

事件

Modal 实例还支持以下事件：

show

当弹窗渲染到页面上时触发。

-- -------------------- ---- -------
----- ----- - --- -------
  ------ -----
  ----- ---------
---

---------------- -- -- -
  ----------------------
---

-------------

hide

当弹窗被隐藏时触发。

-- -------------------- ---- -------
----- ----- - --- -------
  ------ -----
  ----- ---------
---

---------------- -- -- -
  ----------------------
---

-------------

示例代码

-- -------------------- ---- -------
------ ----- ---- ------------------------

----- ------ - --- -------
  ------ -----
  ----- ----- ----- ----
  ----- --------
  --------- -----
---

----------------- -- -- -
  ----------------------
---

----------------- -- -- -
  ----------------------
---

--------------

----- ------ - --- -------
  ------ -----
  ----- ----- ------- ----
  ----- ----------
  --------- -----
  -------------- -----

  ---------- -- -- -
    ------------------------
  --

  --------- -- -- -
    ------------------------
  --
---

--------------

----- ------ - --- -------
  ------ -----
  ----- ----- ------ ----
  ----- ---------
  -------- ---------
  ------------ --------
  --------- -----
  -------------- -----

  ---------- ------- -- -
    --------------------------------
  --

  --------- -- -- -
    ------------------------
  --
---

--------------

----- ------ - --- -------
  ------ -----
  ----- ----- ------- ----
  ----- ----------
---

--------------

------------- -- -
  --------------
-- ------

总结

@beisen-phoenix/modal 是一款实用的弹窗组件，它提供了强大的 API，能够帮助你快速实现各种类型的弹窗。希望这篇文章能够帮助你更好地使用 @beisen-phoenix/modal。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/134810