简介
viewer-ss 是一个用于展示图片和视频的 npm 包。可以用于前端项目中需要展示大量图片或视频时，提供方便的展示和管理方式。
安装
可以通过 npm 进行安装：
--- ------- --------- ------
调用
在项目中引入 viewer-ss：
------ ------ ---- ------------ ------ ---------------------------- -- ------
使用
viewer-ss 的使用非常简单。只需构建一个具有固定样式的 HTML 元素，并使用 JS 调用即可。
以下是一个简单的 HTML 示例代码：
---- ------------------------- ---- ----------------------- ------------- ---- ------------------------ ------------- ------ ----------------------- ----------------- ------
在 JS 中引入 viewer 并进行调用：
----- ------ - --- --------------------------------------------------- -
-------- -
------- --
-------- --
--------- --
------ --
----- --
----- --
----- --
----------- --
------------ --
--------------- --
------------- --
--
---参数配置
以下是 viewer-ss 可以配置的一些参数：
inline
是否将 viewer 渲染到父容器中。
----- ------ - --- --------------------------------------------------- - ------- ------ ---
viewed
是否在初始化结束后立刻显示视图。
----- ------ - --- --------------------------------------------------- - ------- ----- ---
button
是否显示工具条按钮。
----- ------ - --- --------------------------------------------------- - ------- ----- ---
navbar
是否显示导航条。
----- ------ - --- --------------------------------------------------- - ------- ----- ---
title
是否显示标题。
----- ------ - --- --------------------------------------------------- - ------ ----- ---
toolbar
是否显示工具条。
----- ------ - --- --------------------------------------------------- -
-------- -
------- --
-------- --
--------- --
------ --
----- --
----- --
----- --
----------- --
------------ --
--------------- --
------------- --
--
---tooltip
是否显示工具提示。
----- ------ - --- --------------------------------------------------- - -------- ----- ---
keyboard
是否启用键盘控制。
----- ------ - --- --------------------------------------------------- - --------- ----- ---
backdrop
是否使用背景板。
----- ------ - --- --------------------------------------------------- - --------- ----- ---
loading
是否启用加载指示器。
----- ------ - --- --------------------------------------------------- - -------- ----- ---
另外，还可以通过参数配置调用自己想要的回调函数：
----- ------ - --- --------------------------------------------------- - ------ ---------- --- ----- ---------- --- ------ ---------- --- ----- ---------- --- ------- ---------- --- ----- ---------- --- ------- ---------- --- ---
示例代码
以下是一个完整示例代码：
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
----- ---------------- -----------------------------------------------------------------------
-------
---- -
------- --
-------- --
------- ------
-------- -----
---------------- -------
------------ -------
-
----------------- -
-------- -----
-
--------
-------
------
---- -----------------------
---- -------------------------
---- ----------------------- -------------
---- ------------------------ -------------
------ ----------------------- -----------------
------
------- ------------------------------------------------------------------------------
------- -----------------------
----- ------ - ----------------------------------
----- --------------- - --------------------------------------------
-------------------------------- -- -- -
----- ------ - --- ----------------------- -
------- ------
-------- -
------- --
-------- --
--------- --
------ --
----- --
----- --
----- --
----------- --
------------ --
--------------- --
------------- --
--
---
---
---------
-------
-------结语
viewer-ss 是一个非常实用的 npm 包，对于前端开发人员来说，可以更加方便地展示项目中的图片和视频。同时，viewer-ss 也提供了很多可供定制化的参数配置，可以让开发人员更好地管理展示的内容。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671081e8991b448e351e