vue图片预览放大缩小插件v-viewer用法

1、先安装依赖

npm install v-viewer --save

2、vue项目中引用（在main.js中或要使用的页面导入）

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

3、直接在页面中当标签使用这个组件
（1）单个使用

<viewer :images="listSalesImg" :options="OptionssalseImg">
      <img class="img_inface"  :src="url" :key="index">
 </viewer>

（2）数组使用

<viewer :images="listSalesImg" :options="OptionssalseImg">
        <img class="img_inface" v-for="(item, index) in listSalesImg" :src="item.url" :key="index">
</viewer>

options是配置这个组件的功能参数

这个是我项目的配置

OptionssalseImg: { 
              "inline": false, 
              "button": false, 
              "navbar": false, 
              "title": false, 
              "toolbar": false, 
              "tooltip": false, 
              "movable": false, 
              "zoomable": true, 
              "rotatable": false, 
              "scalable": false, 
              "transition": true, 
              "fullscreen": true, 
              "keyboard": true, 
              "url": "data-source" 
            },

大家可以对照着这个来配置自己需要的参数。