v-viewer 预览图简单使用

在网上找过很多插件，感觉这个插件也还不错，我个人认为移动端用vant-ui的imgpreview挺不错的，但是公司要求挺多的，就找了v-viewer这个插件
这个插件我是用在移动端的，点击打开实在另一个页面
1.安装依赖

npm install v-viewer --save

2.全局引入（main.js）

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    inline: true,
    button: false,
    navbar: true,
    title: true,
    toolbar: true,
    tooltip: true,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: true,
    transition: true,
    fullscreen: true,
    keyboard: true,
    url: 'data-source'
  }
})

3.在vue页面中使用

<viewer :images="workSwiperList" @inited="inited" ref="viewer" :index="3">
        <img v-for="(src,index) in workSwiperList" :src="src" :key="index" >
 </viewer>

在data中使用 inited是初始化完成后执行，我这里是一初始化，就弹出预览图，不用再次点击轮播图

  methods: {
    inited (viewer) {
      this.$viewer = viewer
      this.$viewer.index = this.activeIndex
// 不要他的按钮
      this.$viewer.options.button = false
// 不要他的底部缩略图
      this.$viewer.options.navbar = false
// 不要他的底部标题
      this.$viewer.options.title = false
// 不要他的底部工具栏
      this.$viewer.options.toolbar = false
      this.show()
    },
  // 调用显示
    show () {
      this.$viewer.show()
    },

4.地址
https://www.npmjs.com/package/v-viewer
https://github.com/mirari/v-viewer
5.基本参数
官网有