v-viewer图片预览插件的使用

今天介绍一款用于图片浏览的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实例。

2.组件方式使用

三、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.代码示例