前言
在前端开发中，弹出框或者下拉菜单是非常常见的需求。而自己写这些组件需要花费不少时间，此时，npm 包 @sat/popover 就可以发挥作用了。@sat/popover 是一个简单易用的 popout 组件，可以帮助我们快速开发这些 UI 组件。
安装
要使用 @sat/popover，只需要在命令行中运行以下命令即可：
--- ------- ------------
当然，我们也可以用 yarn 进行安装：
---- --- ------------
基本使用
@sat/popover 组件本质上是一个 React 组件。因此，我们需要首先导入 React ：
------ ----- ---- --------
然后，我们可以稍加配置，实现一个最简单的 popover ：
------ ----- ---- --------
------ ------- ---- ---------------
-------- ----- -
------ -
-------- -------------- -------
------------- -----------
----------
--
-需要注意的是，这个组件是需要包含在容器中的。@sat/popover 使用了 React 的基本原理，将 popover 的内容包装在了一个容器组件中。而这个父容器才能触发显示/隐藏 popover。
props 参数
除了 content 属性，@sat/popover 还提供了其他可选的属性：
- placement: popover 显示的位置。可选值有 top、bottom、left、right。默认值是 top。
- className: 自定义 popover 的 CSS 类名。
- style: 自定义 popover 内容区域的样式。
API
除了 props 属性以外，Popover 组件还提供了一些方法供我们调用：
- show(): 显示 popover。
- hide(): 隐藏 popover。
- toggle(): 切换 popover 的显示状态。
- isVisible(): 返回 popover 的可见状态。
这些方法需要通过 ref 来进行调用，例如：
------ ------ - ------ - ---- --------
------ ------- ---- ---------------
-------- ----- -
----- ---------- - -------------
----- ----------------- - -- -- -
--------------------------
-
------ -
--
-------- ---------------- -------------- -------
------- --------------------------------- -----------
----------
------- ----------- -- ------------------------------- ----------------
---
--
-示例代码
下面是一个复杂一点的示例代码，实现了一个根据用户点击位置弹出菜单的功能：
------ ------ - --------- ------ - ---- --------
------ ------- ---- ---------------
-------- ----- -
----- ------------ -------------- - ----------------
----- ----- ------- - ------------ ----
----- ------- - -------------
----- ------------------- - --- -- -
----- -------- - --------- ---------
-----------------
-- ------------------------------ -
-----------------------
-
--
----- ----------------- - -- -- -
--------------------
--
----- --------------- - -- -- -
---------------------
-----------------------
--
------ -
--
------- -------------------------------- -------------
----------- -- -
--------
-------------
---------
--- --------------------------
-------- ------
-------- ------
-------- ------
-----
-
-------- ----- ------- ---- ------ --
--
--
---
--
-此例子实现了一个连续点击按钮会在每次点击位置弹出一个菜单的功能。点击菜单项后，菜单会自动隐藏。这正是 @sat/popover 组件的优势之一：让我们轻松实现复杂的交互功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005663081e8991b448e217c