预览效果链接:https://www.jianshu.com/p/1fd3b4e6911c
今天介绍一款用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,它是基于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配置项说明
'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
四、备注
1.中文文档
2.在线调试参数查看效果
3.代码示例