vue放大缩小div_vue 图片预览（鼠标滚动、点击放大、缩小图片）

一、插件v-viewer

1、安装插件

npm install v-viewer -s

2、main.js引入js、css

import Viewer from 'v-viewer'

import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {

defaultOptions: {

zIndex: 9999

}

})

Viewer.setDefaults({

Options: {

"inline": true, // 是否启动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,