如果你在做前端开发中需要展示两张图片进行对比，那么 gl-compare-sidebar npm 包就是一个很好的选择。在这篇文章中，我们将会介绍如何使用这个 npm 包。
安装
在开始使用 gl-compare-sidebar 之前，你需要保证 Node.js 和 npm 包管理器已经安装在你的电脑上。安装步骤如下：
- 打开终端或命令行界面
- 输入
npm install --save gl-compare-sidebar
这样就完成了 gl-compare-sidebar 的安装。
用法
在你的前端项目中，你需要引入 gl-compare-sidebar 包，并创建一个 <div> 元素用于容纳 gl-compare-sidebar 组件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------------------
----- ---------------- ----------------- --
-------
------
---- ---------------
------- ------------------------
-------
--------- -------------------- ---- ------- ------ -------------- ---- --------------------- ----- --- - ------------------------------- ----- ------- - - ---- --------------------- ---------- --------------------- ------- -------------- --------- ----- ----------- --- -- ----- ------- - --- ------------------- --------- ---------------
以上代码中，我们引入了 gl-compare-sidebar 并以 <div id="app"></div> 容纳了组件。然后我们创建了一个 options 对象，包含以下属性：
src： 第一个需要对比的图片链接；targetSrc：第二个需要对比的图片链接；easing：动画效果，支持 CSS3 的所有 easing functions。duration：动画过渡时间，以毫秒计算；handleSize：手柄（滑块）大小。
最后我们使用 new CompareSidebar(app, options) 创建了 gl-compare-sidebar 组件，并使用 init 方法初始化，在页面上就可以看到两个图片并拥有对比功能。
示例代码
下面这个示例将演示 gl-compare-sidebar 如何工作。需要确保在本地计算机中有两张名为 image1.jpg 和 image2.jpg 的图片，这两张图片放在 public/assets 目录下面。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------------------
-----
----------------
---------------------------------------------------------------------------
--
----- ---------------- ----------------- --
-------
------
---- ---------------
------- ------------------------
-------
--------- -------------------- ---- ------- ---- - ------- -- -------- -- - --- - ---------- ----- - ---- - -------- ----- ---------------- ------- ------------ ------- ----------- ------ -
-- -------------------- ---- ------- ------ -------------- ---- --------------------- ----- --- - ------------------------------- ----- ------- - - ---- --------------------- ---------- --------------------- ------- -------------- --------- ----- ----------- --- -- ----- ------- - --- ------------------- --------- ---------------
打开浏览器预览页面，你将看到两张图片并且有滑块可供对比。
结论
在本文中，我们提及了 gl-compare-sidebar 的安装，如何在前端项目中使用它，以及如何设置它的选项来定制化它的功能。通过这个 npm 包，您可以方便的在自己的项目中展示两张图片进行对比。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/102400