vue 图片放大旋转缩小等功能

npm install v-viewer --save
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer);
Viewer.setDefaults({
  Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

名称 默认值 说明
inline false 启用 inline 模式
button true 显示右上角关闭按钮
navbar true 显示缩略图导航
title true 显示当前图片的标题
toolbar true 显示工具栏
tooltip true 显示缩放百分比
movable true 图片是否可移动
zoomable true 图片是否可缩放
rotatable true 图片是否可旋转
scalable true 图片是否可翻转
transition true 使用 CSS3 过度
fullscreen true 播放时是否全屏
keyboard true 是否支持键盘
url src 设置大图片的 url

<div>
    <viewer :images="signImages">
        <img v-for="src in signImages" :src="src" :key="src" width="50">
    </viewer>
</div>

let signImages = [
    'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg'
]