Viewer.js----图片查看

Viewer.js 是一个用于展示图片、视频等多媒体内容的轻量级 JavaScript 库，提供了现代的图片查看器功能，比如放大、缩小、旋转、拖动等操作，适用于浏览器中查看图片等资源。

官网地址：Viewer.js

详细说明：Viewer.js – 强大的JS/jQuery图片查看器_dowebok

. 如何使用 Viewer.js

1.1 引入 Viewer.js

首先，你需要在 HTML 页面中引入 Viewer.js。你可以选择通过 CDN 或者下载本地使用。

通过 CDN 引入：

<!-- 引入 Viewer.js 样式 -->
<link rel="stylesheet" href="https://unpkg.com/viewerjs/dist/viewer.css"><!-- 引入 Viewer.js 脚本 -->
<script src="https://unpkg.com/viewerjs/dist/viewer.js"></script>

通过 NPM 安装（如果你使用 npm 管理项目）：

npm install viewerjs

然后，在你的 JavaScript 文件中引入：

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

1.2 使用 Viewer.js 来显示图片

一旦引入了 Viewer.js，你就可以在 HTML 页面中使用它来展示图片了。

<div><img src="image1.jpg" alt="Image 1" class="viewer-img"><img src="image2.jpg" alt="Image 2" class="viewer-img"><img src="image3.jpg" alt="Image 3" class="viewer-img">
</div><script>const images = document.querySelectorAll('.viewer-img');const viewer = new Viewer(images, {inline: true,button: true,navbar: true,title: true,toolbar: {zoomIn: 1,zoomOut: 1,oneToOne: 1,reset: 1,prev: 1,play: 1,next: 1,rotateLeft: 1,rotateRight: 1,flipHorizontal: 1,flipVertical: 1,}});
</script>

1.3 配置项

Viewer.js 提供了许多配置项来定制其行为，例如：

inline: 是否允许在页面上嵌套显示。
button: 是否显示底部控制按钮。
navbar: 是否显示导航栏。
title: 是否显示标题。

2. 封装成一个 Vue 组件

如果你在使用 Vue.js 开发项目，可以将 Viewer.js 封装成一个 Vue 组件。

2.1 安装和引入

首先安装 Viewer.js：

npm install viewerjs

然后在你的 Vue 组件中引入 Viewer.js：

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

2.2 编写 Vue 组件

在你的 Vue 组件中，封装 Viewer.js：

<template><div><div ref="viewerContainer" class="viewer-container"><imgv-for="(img, index) in images":key="index":src="img":alt="'Image ' + (index + 1)"class="viewer-img"/></div></div>
</template><script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';export default {name: 'ImageViewer',props: {images: {type: Array,required: true,},},mounted() {// 初始化 Viewer.jsconst viewer = new Viewer(this.$refs.viewerContainer, {inline: true,button: true,navbar: true,title: true,toolbar: {zoomIn: 1,zoomOut: 1,oneToOne: 1,reset: 1,prev: 1,play: 1,next: 1,rotateLeft: 1,rotateRight: 1,flipHorizontal: 1,flipVertical: 1,},});},
};
</script><style scoped>
.viewer-container {display: flex;gap: 10px;
}.viewer-img {max-width: 100%;cursor: pointer;
}
</style>

2.3 组件使用示例

在其他组件中使用 ImageViewer 组件：

<template><div><ImageViewer :images="imageList" /></div>
</template><script>
import ImageViewer from './components/ImageViewer.vue';export default {components: {ImageViewer,},data() {return {imageList: ['image1.jpg','image2.jpg','image3.jpg','image4.jpg',],};},
};
</script>