插件简介
基于 viewer.js 插件，用于 Vue 的图像查看器组件
官网地址：/v-viewer/
下载安装
通过 npm 安装：
npm install v-viewer
GitHub 下载地址：/mirari/v-viewer
UMD 用法
Browser：
<link href="viewerjs/viewer.css" rel="stylesheet"><script src="vue/vue.js"></script><script src="viewerjs/viewer.js"></script><script src="viewerjs/v-viewer.js"></script><!-- 指令形式 --><div class="images" v-viewer><img src="1.jpg"><img src="2.jpg"></div><!-- 组件形式 --><viewer :images="images"><img v-for="src in images" :src="src" :key="src"></viewer><script>Vue.use(VueViewer.default)</script>
CommonJS：
var VueViewer = require('VueViewer');
AMD：
require(['VueViewer'], function (VueViewer) {});
Vue 指令形式用法
只需要将 v-viewer 指令添加到任意元素即可，该元素下的所有 img 元素都会被 viewer 自动处理。
可以传入 options 配置项：v-viewer="{inline: true}"
可以先用选择器查找到目标元素，然后用 el.$viewer 来获取 viewer 实例。
<template><div id="app"><div class="images" v-viewer="{movable: false}"><img v-for="src in images" :src="src" :key="src"></div><button type="button" @click="show">Show</button></div></template><script>import 'viewerjs/dist/viewer.css'import Viewer from 'v-viewer'import Vue from 'vue'Vue.use(Viewer)export default {data() {images: ['1.jpg', '2.jpg']},methods: {show () {const viewer = this.$el.querySelector('.images').$viewerviewer.show()}}}</script>
指令修饰器：static
添加修饰器后台，viewer 的创建只会在元素绑定指令时执行一次。
如果你确定元素内的图片不会再发生变化，使用它可以避免不必要的重建动作。
<div class="images" v-viewer.static="{inline: true}"><img v-for="src in images" :src="src" :key="src"></div>
Vue 组件形式用法
你也可以单独引入全屏组件并局部注册它。
使用 作用域插槽 来定制你的图片展示方式。
监听 inited 事件来获取 viewer 实例，或者也可以用 this.refs.xxx.$viewer 这种方法。
<template><div id="app"><viewer :options="options" :images="images"@inited="inited" class="viewer" ref="viewer"><template scope="scope"><img v-for="src in scope.images" :src="src" :key="src">{{scope.options}}</template></viewer><button type="button" @click="show">Show</button></div></template><script>import 'viewerjs/dist/viewer.css'import Viewer from "v-viewer/src/component.vue"export default {components: {Viewer},data() {images: ['1.jpg', '2.jpg']},methods: {inited (viewer) {this.$viewer = viewer},show () {this.$viewer.show()}}}</script>
插件配置项
其它详细配置项请参考 viewer.js 这篇文章：/liang_wf/article/details/102561670
1、name：String，默认值为 viewer
为了避免重名冲突，可以添加 name 配置项，代码引入如下：
<template><div id="app"><div class="images" v-vuer="{movable: false}"><img v-for="src in images" :src="src" :key="src"></div><button type="button" @click="show">Show</button></div></template><script>import 'viewerjs/dist/viewer.css'import Vuer from 'v-viewer'import Vue from 'vue'Vue.use(Vuer, {name: 'vuer'})export default {data() {images: ['1.jpg', '2.jpg']},methods: {show () {const vuer = this.$el.querySelector('.images').$vuervuer.show()}}}</script>
2、defaultOptions：Object，默认值为 undefined
在初始化时需要修改 viewer.js 的全局默认配置项，代码引入如下：
import Viewer from 'v-viewer'import Vue from 'vue'Vue.use(Viewer, {defaultOptions: {zIndex: 9999}})
在任何时候修改全局默认配置项，代码如下：
import Viewer from 'v-viewer'import Vue from 'vue'Vue.use(Viewer)Viewer.setDefaults({zIndexInline: })
