在前端开发过程中，我们经常需要使用一些弹出框组件来展示一些后续操作的选项或者信息。而一个好的弹出框组件不仅仅能够提高用户体验，还能够减少我们的代码编写难度。今天我们要介绍的是 @ranout/ngx-bottom-sheet 这个 npm 包，它将为我们提供一个方便的底部弹出框组件。本文将详细介绍该组件的使用方法，并提供示例代码和相应说明。
1. 安装和使用
首先，我们需要在项目中安装该 npm 包。使用以下命令进行安装：
npm install @ranout/ngx-bottom-sheet --save
安装完成之后，我们需要在应用模块引用 NgxBottomSheetModule，示例代码如下：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------------- - ---- ---------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在我们已经可以在我们的组件中使用@ranout/ngx-bottom-sheet 库提供的组件。示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ---------------------------
------------
--------- -----------
--------- -
------- -------------------------------- ------ --------------
-
--
------ ----- ------------ -
------------------- ------------------- ---------------------- --
----------------- -
------------------------------
----- -
------ ------- ----- -------
-------- ------- ----- --------
-
---------------- -- -
-----------------
---
-
-接下来，我们要详细讲解更多定制化的使用方法。
2. API 详解
| API | 描述 |
|---|---|
open(options) |
打开底部弹出框。 |
close(data?) |
关闭底部弹出框。 |
dismiss(reason?) |
底部弹出框关闭并且 send a reject 给 result$. |
backdropClick() |
点击背景关闭底部弹出框。 |
keyDown(event) |
按 Esc 关闭底部弹出框。 |
result$ |
可被订阅以获取底部弹出框返回的内容。 |
open(options)
这个 API 需要传递底部弹出框的选项，包括以下参数：
| 参数 | 类型 | 描述 |
|---|---|---|
data |
any |
必传参数。传递给底部弹出框组件的数据。 |
title? |
string |
底部弹出框的标题。 |
options? |
any |
底部弹出框的选项，可以自定义一些属性或样式。 |
示例代码：
-- -------------------- ---- -------
------------------------------
----- -
------ ------- ----- -------
-------- ------- ----- --------
--
------ ------- -------
-------- -
------ -------------
-
---------------- -- -
-----------------
---close(data?)
如果在底部弹出框未关闭之前想要关闭它，可以使用这个 API。在关闭时可以选择传递要返回的数据。
示例代码：
this.bottomSheetService.close('Closed with data');dismiss(reason?)
如果在底部弹出框未关闭之前想要关闭它并返回一个错误，可以使用 dismiss。如有必要，你可以选择提供 reject 调用的理由。在 subscribe 方法中，则可以获取到该错误信息。
示例代码：
this.bottomSheetSerivce.dismiss('Dismiss reason');backdropClick()
如果需要在点击底部弹出框背景时关闭它，可以使用这个 API。
this.bottomSheetService.backdropClick();
keyDown(event)
如果需要在按下 Esc 键时关闭底部弹出框，可以使用这个 API，Event 参数则是表示按下的键。
this.bottomSheetService.keyDown(event);
result$
subscribe 这个属性可以获取到 BehaviorSubject，用于获取底部弹出框的结果。
this.bottomSheetService.result$.subscribe(res => {
console.log(res);
});示例代码：使用 result$ 和 close 返回数据。
this.bottomSheetService.result$.pipe(
take(1)
).subscribe(res => {
console.log(res);
});
this.bottomSheetService.close('Closed with data');3. 应用场景
@ranout/ngx-bottom-sheet 库提供的底部弹出框可以被用于多种应用场景，包括但不限于以下几种：
底部菜单
底部弹出框可以被用作底部菜单。例如，在桌面端网页应用中，可以在“添加”按钮上打开底部菜单，选择不同的操作选项。
底部信息展示
底部弹出框还可被用作信息展示。例如，在移动端网页应用中，可以在用户登录成功后使用底部弹出框提示用户登录成功。
其它应用场景
在一些用户界面中，可能会有需求在底部展示一些具体信息或者操作选项，这时候底部弹出框就可以很好地解决这个问题。只要想象一下那些需要下拉操作的场合，底部弹出框就可以很好地适应。
4. 结束语
@ranout/ngx-bottom-sheet 库提供的底部弹出框组件，可以有效地提高我们应用程序的用户界面。使用该组件，不仅可以提高用户的操作体验，还能为我们的开发工作提供帮助。希望本文所提供的示例代码和详细解释对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66c70