Vue中使用图片查看器
项目中使用的是 vue + element-ui 要求查看图片时能够实现 图片放大缩小翻转等功能,于是找到一个适合的插件,首先看下效果:
功能与我们设想的一样,下面看下如何使用
GitHub地址:viewerjs
官网:https://fengyuanchen.github.io/viewerjs/
如何使用
1、首先安装v-viewer
npm i v-viewer --save
如果安装不上 使用cnpm安装
2、然后main.js中引入 v-viewer
import Viewer from "v-viewer"
import 'viewerjs/dist/viewer.css' //记得引入样式文件
Vue.use(Viewer)
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, // 是否支持键盘
'url': 'data-source' // 设置大图片的 url
}
})
可以将它作为一个组件:
<viewer class="container" :images="urlList"> //需要绑定放图片的数组,接收固定参数
<div class="imgWrapper" v-if="urlList.length > 0">
<div class="img" v-for="(item,index) of urlList" :key="index">
<img v-if="isUrl" :src="item" alt="">
<img v-else :src="item.url" alt="">
</div>
</div>
</viewer>
设置下样式,就可以使用了
对于下面用不到的控件,找到class类名,弄掉就好了
<style lang="scss">
.viewer-toolbar{
.viewer-flip-horizontal{
display:none;
}
.viewer-flip-vertical{
display:none;
}
}
</style>