npm 包 @beisen-phoenix/modal 使用教程

介绍

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

安装

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

使用 npm：

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

使用 yarn：

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

快速上手

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

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

创建一个简单的弹窗：

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

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

很简单吧！这个弹窗只有一个标题和正文。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

阅读全文

猜你喜欢

  • npm 包 @liquid-js/river 使用教程

    导言 随着前端技术的不断发展，工程化概念越来越深入人心。这里介绍一款 npm 包 @liquid-js/river，它可以提供丰富的工具函数库，方便我们在开发过程中快速使用，提高我们的开发效率。

    5 年前
  • npm 包 @types/glob-stream 使用教程

    背景 在前端开发中，我们经常需要进行文件的操作，如构建项目、打包文件、生成 API 文档等。而文件操作本身就是一个非常繁琐而又容易出错的工作。为了更好地处理文件操作，我们可以使用 glob-strea...

    5 年前
  • npm 包 @microsoft/gulp-core-build 使用教程

    前言 现在的前端开发离不开构建工具，而 gulp 是一个优秀的构建工具，大部分的项目都离不开它。而在使用 gulp 的过程中，@microsoft/gulp-core-build 这个 npm 包提供...

    5 年前
  • npm 包@liquid-js/glacier 使用教程

    前言 随着前端技术的发展，越来越多的开发者们需要使用各种各样的包来帮助他们构建更好的 Web 应用程序。其中，npm 包的使用越来越普遍，因为它们提供了方便的管理和分发工具。

    5 年前
  • npm 包 @flexis/srcset 使用教程

    在前端开发中，尤其是在响应式图片方面，@flexis/srcset 是一款非常不错的 npm 包。本文将为大家详细介绍该包的使用方法，同时带有深度和指导性内容，帮助读者更好地了解和掌握这款包。

    5 年前
  • npm包 @flexis/favicons 使用教程

    在 Web开发 过程中，我们经常会使用图标来增强用户体验。通常，开发人员必须手动创建各种尺寸和格式的图标，这是一项繁琐的任务。然而，有一个名为 @flexis/favicons 的 npm 包可用来...

    5 年前
  • npm 包 uws 使用教程

    uws 是一个高效的 C++ Websocket 服务器，使用 pure JavaScript 实现的 node.js addon。它比 node.js 的原生 websocket 模块更快，同时也更...

    5 年前
  • npm 包 dat-daemon-protocol 使用教程

    在前端开发中，有时我们需要处理的不仅仅是客户端和服务器之间的数据传输问题，还需要考虑数据在局域网内的传输。如何在局域网内安全、稳定地传输数据？这时我们可以使用 Node.js 中的 dat-daemo...

    5 年前
  • npm 包 emoji-toolkit 使用教程

    随着社交网络和移动应用的普及，表情符号（Emoji）在我们的生活中越来越重要。在前端开发中，如何有效地处理表情符号是开发者必须面对的重要问题之一。在这篇文章中，我们将介绍一款 npm 包 emoji-...

    5 年前
  • npm 包 @sammacbeth/discovery-swarm-web 使用教程

    在现代 web 应用中，通信和数据传输是非常重要的一部分。而 @sammacbeth/discovery-swarm-web 是一个用于 Web 浏览器中的点对点数据传输的 npm 包。

    5 年前
  • NPM包 @sammacbeth/discovery-swarm-test使用教程

    随着近年来P2P网络技术的快速发展，越来越多的开发者开始在他们的应用程序中使用P2P网络技术。而@sammacbeth/discovery-swarm-test是一个基于Nodejs实现的P2P网络测...

    5 年前
  • npm 包 ara-identity-credentials 使用教程

    前言 随着数字经济的发展，数字身份认证也成为了热门话题之一。ara-identity-credentials 是一个 npm 包，提供了一系列工具函数来处理数字身份认证，可以在前端应用中方便地使用这些...

    5 年前
  • npm 包 json-select 使用教程

    什么是 json-select json-select 是一个用于从 JSON 数据中选择和转换元素的工具。它提供了一种类似 XPath 的语法，你可以通过编写简单的查询表达式来选择 JSON 数据中...

    5 年前
  • npm 包 ara-identity-dns 使用教程

    简介 ara-identity-dns 是一款基于 Node.js 开发的 npm 包，用于将域名解析为 ara-identity 结构的 DNS 记录。ara-identity 是阿里云区块链平台中...

    5 年前
  • npm 包 ara-context 使用教程

    在前端开发中，我们经常需要在不同组件和页面间传递和获取数据。传统的方式是使用 props 或者 redux 等状态管理库，但是这些方法有时候会显得有些繁琐，尤其是在多层嵌套组件中使用时。

    5 年前
  • npm 包 split-buffer 使用教程

    在前端开发中，有时我们需要对二进制数据流进行操作并从中获取数据。而在 JavaScript 中，Buffer 对象是一个非常有用的对象用于处理二进制数据流，它提供了对二进制数据的读取、写入、切分等操作...

    5 年前
  • npm 包 sodium-browserify 使用教程

    概述 sodium-browserify 是一个基于 libsodium 加密库的 JavaScript 依赖库。它提供了一些通用的密码学原语，例如加密、解密、签名以及密钥交换等。

    5 年前
  • npm 包 is-zero-buffer 使用教程

    简介 在前端开发中，经常会涉及到处理二进制数据的操作。而比较常见的情况是，我们需要判断一个 Buffer 类型是否为全零。如果使用传统的方法，就需要一个个比较 Buffer 中每个元素是否为 0。

    5 年前
  • npm 包 ara-identity-resolver 使用教程

    在前端开发中，不可避免地会用到各种第三方库和工具。其中，npm（Node.js 包管理器）是前端界十分流行的一个，通过它可以方便地下载和安装各种 JavaScript 包，大大提高开发效率。

    5 年前
  • npm 包 multidrive 使用教程

    当我们需要在前端进行文件上传，下载等操作时，经常需要操作多个云服务平台，例如 Google Drive, Dropbox 等。而 multidrive 就是一个可以帮助你轻松完成这些操作的 npm 包...

    5 年前

相关推荐

    暂无文章