前端开发中常常需要实现图片、视频的预览效果，而 previewer-js 是一个轻量级的 npm 包，帮助我们实现了图片和视频的预览效果，并且使用起来非常简单，本文将介绍 previewer-js 的使用教程。
安装
使用 npm 安装 previewer-js：
npm install previewer-js --save
使用
我们可以通过以下代码来使用 previewer-js：
-- -------------------- ---- ------- ------ --------- ---- --------------- ----- --------- - --- ----------- --------- ------------- ----- -------- ---- ------------------------------ --- -----------------
上面的代码表示新建一个 Previewer 对象，将要渲染在 class 为 previewer 的元素上，类型为 video，并且 url 为 'http://example.com/video.mp4'，然后调用 init 方法进行渲染。
可以使用 imageUrl 属性来设置图片的路径：
const previewer = new Previewer({
selector: '.previewer',
type: 'image',
imageUrl: 'http://example.com/image.jpg'
});也可以通过 HTML 的方式来渲染预览效果：
<div class="previewer" data-type="video" data-url="http://example.com/video.mp4"></div>
const previewer = new Previewer({
selector: '.previewer'
});
previewer.init();参数
Previewer 支持如下参数：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| selector | 预览效果要渲染到的元素，可以是 class 或 id 的选择器 | string | |
| type | 预览效果的类型，可以是 image（图片）或 video（视频） (可选参数) | string | image |
| url/imageUrl | 图片 or 视频的路径 | string |
其他 API
Previewer 同样提供其他 API，例如：
-- -------------------- ---- ------- ----- --------- - --- ----------- --------- ------------- ----- -------- ---- ------------------------------ --- ----------------- -- ------- ----------------- -- ------ ----------------- -- ------
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------------
----- ---------------- --------------------------------------------------------------------
-------
------
---- ----------------- ----------------- ----------------------------------------------
------- -----------------------
------- -----------------------
------- ---------------------------------------------------------------------------
--------
----- --------- - --- -----------
--------- ------------
---
-----------------
--------------------------------------------------------- -- -- -
-----------------
---
--------------------------------------------------------- -- -- -
-----------------
---
---------
-------
-------学习与指导意义
Previewer-JS 是一款轻量且易用的 npm 包，使得前端开发人员可以更加方便地实现网站的图片和视频预览效果。使用 Previewer-JS 可以减少开发人员的工作量，提高开发效率。
在学习使用 Previewer-JS 的过程中，我们可以进一步学习如何使用 npm 包，如何引入第三方包，如何使用 ES6 的特性等内容，对于提高我们的编码能力具有重要作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de220