1.下载插件 Vue2.0

npm i v-viewer -S
或者
yarn add v-viewer

2.引入

//在mine.js中
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)
//配置项
Viewer.setDefaults({
  zIndexInline:9999
})

3.使用

<!--1、以组件的形式-->
<viewer :images="photo">
  <img v-for="(src,index) in photo" :src="src" :key="index"/> 
</viewer>

<!--2、以指令的形式-->
只需要将v-viewer指令添加到任意元素即可，该元素下的所有img元素都会被viewer自动处理。
<div v-viewer>
  <img v-for="(src,index) in photo" :src="src" :key="index"/> 
</div>

4.配置信息表

Vue3.0

//下载
npm install v-viewer@next 或 yarn add v-viewer@next
 
 //引入
import { createApp } from 'vue'
import App from './App.vue'
import 'viewerjs/dist/viewer.css' //这
import VueViewer from 'v-viewer' //这
const app = createApp(App)
app.use(VueViewer) //这
app.mount('#app')

//用法是一样的
地址：https://github.com/mirari/v-viewer/tree/v3