v-viewer使用

v-viewer是一个图片放大预览，他可以鼠标滚轮放大和缩小，也可以全屏，上一张下一张，鼠标拖动。

1.首先先安装

npm install v-viewer --save

2.main.js引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

 

注：如果你不想显示按钮和图片名称的话，你可以在main.js

Vue.use(Viewer, {
    defaultOptions: {
        button: false,
        navbar: false,
        title: false,
        toolbar: true,
    }
})

3.使用

---

<viewer :images="photo">
      //photo 一定要一个数组，否则报错，在data中写图片的地址
          <img
                v-for="(src,index) in photo"
                :src="src"
                :key="index"
                :onerror="errorImg"
              >
</viewer>