v-viewer的使用

v-viewer 是一款可用在vue项目中的图片预览插件，配置全，用法简洁，推荐给大家。

首先我们安装包

npm install v-viewer --save-dev

接着在main.js中配置下

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    toolbar: {
      zoomIn: 4,
      zoomOut: 4,
      oneToOne: 4,
      reset: 4,
      prev: 0,
      play: {
        show: 0,
        size: 'large'
      },
      next: 0,
      rotateLeft: 4,
      rotateRight: 4,
      flipHorizontal: 0,
      flipVertical: 0
    },
    title: 0
  }
})

最后把“v-viewer”放到你要预览的图片便签内就好了，so easy!

<img src="https://www.hihj.cn/girl.jpg" v-viewer />