Vue viewer插件使用

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

npm install v-viewer

2.项目中引入viewerjs

import Vue from 'vue'
import Viewer from 'v-viewer'
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.页面中使用

<viewer
  ref="viewer"
  :options="options"
  :images="images"
  rebuild
  class="viewer"
  @inited="inited"
>
  <template slot-scope="scope">
    <img v-for="src in scope.images" :src="src" :key="src">
    {{scope.options}}
  </template>
</viewer>
//images = [image的集合,可以像查看相册一样查看图片]

5.只需要将v-viewer指令添加到任意元素即可，该元素下的所有img元素都会被viewer自动处理。

//指令使用
<div class="imgDiv" v-viewer="{movable: true}">
	<img style="height:50px;width:50px" :src="scope.row.xxx">
</div>