v-viewer图片预览插件的使用
v-viewer图片预览组件，支持旋转缩放，翻转，等操作，他是基于viewer.js做的二次开发，github地址https://github.com/mirari/v-viewer
一、安装
npm install v-viewer --save二、使用
1.指令方式使用
只需要将v-viewer指令添加到任意元素即可，该元素下的所有img元素都会被viewer自动处理。你可以像这样传入配置项： 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 () {
//获取viewer实例
const viewer = this.$el.querySelector('.images').$viewer
//调用show方法进行显示预览图
viewer.show()
}
}
}
</script>2.组件方式使用
<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() {
//调用$viewer的show方法，默认显示第一张图片
this.$viewer.show()
//如果需要指定显示某一张图片使用view方法，index是指定的那张图片所在数组的位置索引
//this.$viewer.view(index)
}
}
}
</script>
三、Options配置项说明
options: {
inline: true, // 是否启用inline模式
button: true, // 是否显示右上角关闭按钮
navbar: true, // 是否显示缩略图底部导航栏
title: true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
toolbar: true, // 是否显示工具栏
tooltip: true, // 放大或缩小图片时，是否显示缩放百分比，默认true
fullscreen: true, // 播放时是否全屏，默认true
loading: true, // 加载图片时是否显示loading图标，默认true
loop: true, // 是否可以循环查看图片，默认true
movable: true, // 是否可以拖得图片，默认true
zoomable: true, // 是否可以缩放图片，默认true
rotatable: true, // 是否可以旋转图片，默认true
scalable: true, // 是否可以翻转图片，默认true
toggleOnDblclick: true, // 放大或缩小图片时，是否可以双击还原，默认true
transition: true, // 使用 CSS3 过度，默认true
keyboard: true, // 是否支持键盘，默认true
zoomRatio: 0.1, // 鼠标滚动时的缩放比例，默认0.1
minZoomRatio: 0.01, // 最小缩放比例，默认0.01
maxZoomRatio: 100, // 最大缩放比例，默认100
url: 'data-source' // 设置大图片的 url
}