npm 包 viewerjs_zxy 使用教程

前言

在前端开发中，我们常常需要使用图片预览功能，这时候往往需要使用一些第三方的插件。而 viewerjs_zxy 则是一个非常优秀的基于 JavaScript 的图片预览插件。

在本文中，我们将介绍如何使用 npm 包 viewerjs_zxy 来实现图片预览功能，并且通过示例代码来展示其使用方法。

安装

要使用 viewerjs_zxy，我们首先需要使用 npm 来安装它。在命令行输入以下命令即可：

npm install viewerjs_zxy --save

使用方法

在安装完 viewerjs_zxy 后，我们需要在项目中引入它。我们可以使用 ES6 的方式来引入，如下所示：

import Viewer from 'viewerjs_zxy';

const viewer = new Viewer(document.querySelector('#image'));

这里的 document.querySelector('#image') 表示我们需要对哪个 DOM 元素进行图片预览。

除了 ES6 的方式，我们还可以使用以下方式来引入：

const Viewer = require('viewerjs_zxy');

const viewer = new Viewer(document.querySelector('#image'));

引入完 viewerjs_zxy 后，我们需要定义一个预览的触发事件。在以下代码中，我们使用 click 事件来触发预览：

document.querySelector('#image').addEventListener('click', function() {
  viewer.show();
});

此时，我们点击 #image 元素时，就能够触发图片预览功能了。

更多参数

除了最基本的参数之外，viewerjs_zxy 还支持很多其他的参数配置。以下是一些常用的参数：

title：设置图片标题

const viewer = new Viewer(document.querySelector('#image'), {
  title: function (image) {
    return (this.index + 1) + ' / ' + this.length + ' ' + image.alt;
  },
});

这里的 title 参数可以是一个函数，函数的入参 image 表示当前预览的图片信息，函数返回值则表示图片的标题。

url：设置图片链接

const viewer = new Viewer(document.querySelector('#image'), {
  url: 'data-original',
});

这里的 url 参数表示图片的链接，可以是图片地址、图片链接属性的名称，或者是一个返回图片链接的函数。

zIndex：设置层级

const viewer = new Viewer(document.querySelector('#image'), {
  zIndex: 9999,
});

这里的 zIndex 参数用来设置预览层级，越大表示预览层级越高。

示例代码

以下代码是一个实际的示例，可以直接复制到 HTML 文件中使用：

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  --------------- ------------
  ----- ---------------- -----------------------------------------------------------------------
  ------- ------------------------------------------------------------------------------
  -------
    --- -
      ------ ------
      ------- ------
      ------- -----
    -
  --------
-------
------
  ---- ------------- ------- ---
  ---- ------------- ------- ---
  ---- ------------- ------- ---
  ---- ------------- ------- ---
  --------
    ----- ------ - --- ---------------------------------------- -
      ------ --------------- -
        ------ ----------- - -- - - - - - ----------- - - - - ----------
      --
      ---- ------
      ------- -----
    ---

    ---------------------------------------------------------- -- -
      ----------------------------- ---------- -
        ----------------
        --------------
      ---
    ---
  ---------
-------
-------

总结

通过本文的介绍，我们了解了如何使用 viewerjs_zxy 这个 npm 包来实现图片预览功能，并且针对不同的参数进行了详细的介绍。希望这篇文章对你学习和使用 viewerjs_zxy 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566aa81e8991b448e2e1e