vue中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);

Viewer.setDefaults({
  Options: {
    "inline": true,  //启动inline模式
    "button": true,  //显示右上角关闭按钮
    "navbar": true,  //显示缩略图导航
    "title": true,  //显示当前图片标题
    "toolbar": true,  //显示工具栏
    "tooltip": true,  //显示缩放百分比
    "movable": true,  //图片是否可以移动
    "zoomable": true,  //图片是否可以缩放
    "rotatable": true,  //图片是否可以旋转
    "scalable": true,  //图片是否可以翻转
    "transition": true,  //使用CSS3过度
    "fullscreen": true,  //播放时是否全屏
    "keyboard": true,  //是否支持键盘
    "url": "data-source" //设置大图片的 url
  }
})

3、组件中使用

//image 必须是一个数组
 
        

效果图