- 官方文档
vue2：
GitHub - mirari/v-viewer: Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
vue3:
Vue3图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 - Mirari's Blog
- 安装
- vue2:
npm install v-viewer@1.7.4
# 或
yarn add v-viewer@1.7.4
注意：vue2项目添加时需要添加版本号，否则安装v-viewer最新版本vue2项目不一定支持
- vue3：(直接添加即可)
npm install v-viewer
# 或
yarn add v-viewer- 在 main.js 文件中引入和配置 v-viewer 插件
- vue2:
// 引入图片预览
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'Vue.use(Viewer, {defaultOptions: {zIndex: 9999, // 设置图片预览组件的层级，确保能在其他组件之上},
})直接Vue.use也可
Vue.use(Viewer)- vue3:
import { createApp } from 'vue'
import App from './App.vue'
// 引入图片预览
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'const app = createApp(App)app.use(Viewer, {defaultOptions: {zIndex: 9999, // 设置图片预览组件的层级，确保能在其他组件之上},
})app.use(Viewer) // 也可
- 使用：(小编只放vue2的代码了，vue3需要注意以下语法即可)
- 方法一：点击直接调用预览 —— this.$viewerApi()
<button @click="doPriveImg()">预览图片</button>doPriveImg(){const imgLists = ['https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500','https://img1.baidu.com/it/u=3689823469,321459310&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',……] // 接受图片路径的数组this.$viewerApi({images: imgLists,})
}
- 方法二：利用img标签预览 —— v-viewer
<imgv-for="(image, index) in imageList":key="index":src="image"v-viewer
/>imageList: ['https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500','https://img1.baidu.com/it/u=3689823469,321459310&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
],
