Vue图片点击放大预览

可以使用 viewerjs插件（PC端、移动端都兼容），使用方法如下：

1、安装依赖：
npm install v-viewer --save
2、 main.js 内引用并注册调用:
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" } });

3、代码中使用xxx.vue

<template>
    <div>
        <viewer :images="imgs">
            <img v-for="src in imgs" :src="src.url" :key="src.title">
        </viewer>
   </div>
</template>

ok，这样就可以了！

效果图：