vue3中使用viewerjs实现图片预览效果

1、前言

viewer.js是一款开源的图片预览插件，功能十分强大:

1. 支持移动设备触摸事件
2. 支持响应式
3. 支持放大/缩小
4. 支持旋转（类似微博的图片旋转）
5. 支持水平/垂直翻转
6. 支持图片移动
7. 支持键盘
8. 支持全屏幻灯片模式（可做屏保）
9. 支持缩略图
10. 支持标题显示
11. 支持多种自定义事件

GitHub地址：https://github.com/fengyuanchen/viewerjs

常用配置参数：

2、实现效果

3、在vue3项目中使用viewer.js

3.1 安装

npm install v-viewer -S
1

3.2 在main.js中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

app.use(Viewer, {
  defaultOptions: {
    // 需要配置的属性 注意属性并没有引号
    title: false,
    toolbar: false
  }
})
1
2
3
4
5
6
7
8
9
10

3.3 组件中使用

<viewer class="image-box" :images="sceneData">
	<div v-for="img in sceneData" :key="img.id">
		<img class="image" :src="img.url" alt="">
	</div>
</viewer>
1
2
3
4
5