产品提出新的需求，针对图片，既可以按钮放大缩小，也可以鼠标滚轮进行放大缩小，同时旋转图片，为了配合产品需求，就进行了搜索，找到了Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作
参考链接：！https://mirari.cc/2017/08/27/Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作/
具体操作步骤
1、安装
npm install v-viewer --save
2、在main.js中记性引用
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
// 可以用来控制按钮的显示与隐藏
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
3、页面使用
<viewer :images="selectInfoPics" :options="options" class="viewer" r ef="viewer">
<template scope="scope">
<div class="dis-line align-center update-img-bg margin-bottom-20" style="margin-right: 6%;" v-for="img in scope.images" :key="img.pic">
<img :src="img.pic" :alt="img.title">
</div>
</template>
</viewer>
其中selectInfoPics相当于是图片的数组
4、如果大图需要展示图片对应的问题，如3中options的内容应该赋值为
options: {
title: (el) => {
return el.getAttribute('alt')
}
},
网友评论