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  @inited="inited" ref="viewer">
        <img :src="src" >
 </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