vue图片预览缩放 - v-viewer

v-viewer：https://github.com/mirari/v-viewer

在实际项目应用中，我们是有出现图片原始宽高很大，所以在页面不好展示，只好同比例缩小图片尺寸显示在列表、详情等地方，这样图片的展示效果不好。那我们的解决方法就是可以点击预览原尺寸图片，当然如果有放大、缩小、移动等效果就更好了。v-viewer就解决了我们的问题

安装

npm install v-viewer --save

引入

import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
	defaultOptions:{
		'inline':false,
		'button':true, //右上角按钮
		"navbar": false, //底部缩略图
		"title": false, //当前图片标题
		"toolbar": true, //底部工具栏
		"tooltip": true, //显示缩放百分比
		"movable": true, //是否可以移动
		"zoomable": true, //是否可以缩放
		"rotatable": true, //是否可旋转
		"scalable": true, //是否可翻转
		"transition": true, //使用 CSS3 过度
		"fullscreen": true, //播放时是否全屏
		"keyboard": true, //是否支持键盘
	}
});

实现

// 数据源 photos图片数组
<viewer :images="photos">
	<img v-for="(src, index) in photos" :src="src" :key="index">
</viewer>

自定义配置，这里我们参照viewer.js