vue 中使用图片查看器插件Viewer.js

一款可以进行预览图片的功能插件viewer.js

先下载插件依赖
npm install v-viewer --save

在main.js里全局引用
// 图片预览
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
  Options: { 
    "inline": true, //	启用 inline 模式
    "button": true, // 显示右上角关闭按钮（jQuery 版本无效）
    "navbar": true, // 显示缩略图导航
    "title": true, //	显示当前图片的标题（现实 alt 属性及图片尺寸）
    "toolbar": true, //	显示工具栏
    "tooltip": true, //	显示缩放百分比
    "movable": true, //	图片是否可移动
    "zoomable": true, //	图片是否可缩放
    "rotatable": true, //	图片是否可旋转
    "scalable": true, //	图片是否可翻转
    "transition": true, //	使用 CSS3 过度
    "fullscreen": false, //	播放时是否全屏
    "keyboard": true, //	是否支持键盘
  }
});

在需要引用的页面写上

    
        

          

            {{item.title}}