@shortcm/elevation 是一个基于 Material Design 风格设计的前端 UI 组件库，其中包含了一个用于实现阴影效果的 npm 包 @shortcm/elevation。在本文中，我们将详细介绍如何使用这个 npm 包来实现给 HTML 元素添加阴影效果。
安装和使用
首先，需要通过 npm 安装 @shortcm/elevation 包。在终端中运行以下命令：
npm install @shortcm/elevation
安装完成后，在您的项目中导入 @shortcm/elevation 包。例如，在 JavaScript 文件中，您可以这样导入：
import Elevation from '@shortcm/elevation';
API 介绍
@shortcm/elevation 包中的 API 包括以下两个函数：
Elevation.applyElevation(element: HTMLElement, level: number)：将指定HTMLElement元素添加指定级别的阴影效果，level取值范围为 1-24。Elevation.removeElevation(element: HTMLElement)：移除指定HTMLElement元素的阴影效果。
示例代码
请参考以下示例代码来使用 @shortcm/elevation 包：
-- -------------------- ---- -------
------ --------- ---- ---------------------
-- -- ---- ------
----- ------- - --------------------------------------
-- -----------------
--- ------------ - --
-- ---------------------
--------------------------------- -- -- -
---------------
-- ------------- - --- -
------------ - --
-
--------------------------------- --------------
---
-- ------------------
-------------------------------------- -- -- -
-----------------------------------
---在上述示例代码中，我们先选取了 HTML 中的某个元素，并创建了一个变量 currentLevel 来保存元素当前的阴影级别。接着，当点击该元素时，会将 currentLevel 的值加一并应用到元素上，如果超出了阴影级别的范围，则重新从 1 开始。最后，当鼠标移开元素时，会移除该元素的阴影效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d0927023822384