简介
在 Web 开发中，有时需要高亮显示某个元素，同时将其它元素暗化。这种需求可以通过 JavaScript 实现，但是如果使用第三方库，就能更高效地实现和更好地兼容各种浏览器。npm 包 react-focus-element 是一款 React 组件，可用于快速实现如上述功能。
安装
使用 npm 安装：
npm i react-focus-element
或者使用 yarn 安装：
yarn add react-focus-element
使用
引入并注册组件
在代码中，首先需要引入组件并注册。通常，可以将组件注册到自己的组件库中，方便以后多次使用。
-- -------------------- ---- -------
------ ----------------- ---- ----------------------
-- ----
------ ------- -------- ------------- -
------ -
--
--- ---- ---
------------------ --
---
--
-使用默认配置
组件默认使用下面的配置：
{
highlight: { backgroundColor: 'rgba(255,255,255,0.85)', borderRadius: '6px' },
mask: { backgroundColor: 'rgba(0,0,0,0.7)', borderRadius: '6px' },
enableClickThrough: true,
animateTime: 200,
}其中：
- highlight：高亮元素使用的 CSS 样式。默认为白色半透明背景和圆角矩形边框。
- mask：其它元素使用的 CSS 样式。默认是黑色半透明背景和圆角矩形边框。
- enableClickThrough：是否允许高亮元素的鼠标事件穿透。默认情况下，允许。
- animateTime：动画持续时间（毫秒）。默认为 200 毫秒。
下面是一个使用默认配置的示例：
-- -------------------- ---- -------
------ ----------------- ---- ----------------------
-- ----
------ ------- -------- ------------- -
------ -
--
--- ---- ---
------------------ ----------------------------
---- -------------------------------
--------------------
--- ---- ---
---
--
-在上面的示例中，高亮显示的是 #my-element。
使用自定义配置
如果需要自定义组件的配置信息，可以使用 config 属性。组件支持以下配置：
- highlight：同上。
- mask：同上。
- enableClickThrough：同上。
- animateTime：同上。
下面是一个使用自定义配置的示例：
-- -------------------- ---- -------
------ ----------------- ---- ----------------------
----- ------ - -
---------- - ---------------- --------- ------------- ----- --
----- - ---------------- ------- --
------------------- ------
------------ ----
--
-- ----
------ ------- -------- ------------- -
------ -
--
--- ---- ---
------------------ --------------------------- ----------------
---- -------------------------------
--------------------
--- ---- ---
---
--
-在上面的示例中，高亮显示的是 #my-element，并且高亮的背景色为黄色，动画持续时间为 500 毫秒。
注意事项
- 本组件针对的是 React 项目。如果项目采用的是其它框架或纯 JavaScript，需要适当修改代码。
- 组件使用了 React 的 Portal 功能，所以可以保证在任意元素上均可使用。
- 如果目标元素（即 targetElement 属性的值）是动态生成的，需要等元素生成后再渲染组件，否则组件无法正常工作。
结语
react-focus-element 是一款使用方便、功能丰富、配置灵活的 npm 包。我们可以用它来实现各种高亮显示需求，从而提升用户体验，并加速开发进度。希望本篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560a981e8991b448dee82