pc 图片预览放大 端vue_vue使用v-viewer实现图片点击放大预览/旋转/翻转

最近在开发pc端后台管理项目，在页面列表显示图片时，用户点击图片，实现当前图片放大预览，这边采用v-viewer实现此效果

1.npm安装

npm install v-viewer

2.main.js全局引入

import Viewer from 'v-viewer';

import 'viewerjs/dist/viewer.css';

Vue.use(Viewer);

3.页面使用

{{msg}}

export default {

name: "HelloWorld",

data() {

return {

msg: "hello"

};

}

};

实现效果：

多张图片：

export default {

name: "HelloWorld",

data() {

return {

images: [require("../assets/girl.png"), require("../assets/logo.png")]

};

}

};

实现效果：

4.配置参数

在vue注册调用时，可以根据需求设置defaultOptions属性，实现按需配置v-viewer

import Viewer from 'v-viewer';

import 'viewerjs/dist/viewer.css';

Vue.use(Viewer, {

defaultOptions: {

'inline': false,

'button': true, //右上角按钮

"navbar": true, //底部缩略图

"title": false, //当前图片标题

"toolbar": true, //底部工具栏

"tooltip": true, //显示缩放百分比

"movable": true, //是否可以移动

"zoomable": true, //是否可以缩放

"rotatable": true, //是否可旋转

"scalable": false, //是否可翻转

"transition": true, //使用 CSS3 过度

"fullscreen": false, //播放时是否全屏

"keyboard": true, //是否支持键盘

"url": "data-source",

}

})

实现效果：