viewerjs在vue@cli脚手架中的使用详解

Vue中使用Viewer.js实现图片预览

最新推荐文章于 2025-09-30 10:02:32 发布

原创

最新推荐文章于 2025-09-30 10:02:32 发布 · 884 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Vue项目中使用Viewer.js库实现图片预览功能，包括安装配置、使用方法及各种选项参数的解析。通过具体实例展示了如何在组件中引入Viewer.js并实现缩略图、放大缩小、全屏浏览等基本图片预览功能。

文章目录

需求分析

项目中使用了vue脚手架,要在vue组件中使用一个图片预览的功能,提供给客户一些基本的图片预览功能,包括缩略图,放大缩小,全屏浏览等基础功能,这里看了一些轮子,有view-photo-view,viewer,js等等库;对比了,感觉项目中使用viewerjs就可以了,然后去github上看了它的readme和一些api,算是比较详细;上手比较简单,应用不复杂,价值交付性价比较高,所以选择了viewerjs;接下来,对viewerjs在项目中的学习使用作为记录;

使用环境分析

1 vue@cli 3.x脚手架
2 viwerjs
使用方法均按照
https://github.com/fengyuanchen/viewerjs/blob/master/README.md
进行翻译测试

安装

有两种使用方式
1 直接下载下来,传统引入

<link  href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>

这个方式很简单,没有太多介绍的必要
2 在vue组件中使用

(1) npm install viewerjs 安装到node_modules中
(2) import 'viewerjs/dist/viewer.css';
    import Viewer from 'viewerjs';
    在组件中的script中引入
    使用规则:new Viewer(element[, options])
    element-->html元素
    options-->相关选项

举例:

<div>
  <img id="image" src="picture.jpg" alt="Picture">
</div>

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"