Vue viewer插件使用

项目开发中使用图片放大是常用功能，通过Vue中 viewer 插件可以方便快捷的实现目的
1.安装viewerjs

npm install viewerjs

2.项目中引入viewerjs

import Vue from 'vue'
import Viewer from 'viewerjs';
import 'veiwerjs/dist/viewer.css';

3.对viewerjs进行修改全局默认配置项目

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    //隐藏不需要的工具栏
    navbar:false,
    toolbar:false,
    button:false,
    url(image) {
       //修改图片放大时的图片路径，这里_300是我缩略图和大图的区别
       return image.src.replace('_300', '');
    },
  }
})

配置API文档地址：https://github.com/mirari/v-viewer
中文文档：https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/

4.页面中使用

  

//images = [image的集合,可以像查看相册一样查看图片]

5.列表中使用，每张图片单独放大，没有下一张