图片预览
使用v-viewer进行图片预览,点击按钮可对图片进行直接预览,基于vue
用法
安装
npm install v-viewer --save
项目引入
import Viewer from 'v-viewer' // viewer.js一种图片预览处理工具
import 'viewerjs/dist/viewer.css' // viewer.js一种图片预览处理工具
// 图片预览后的一些操作,根据需要选用
Vue.use(Viewer, {
defaultOptions: {
'zIndex': 9999,
'inline': false, // 启用 inline 模式
'button': true, // 显示右上角关闭按钮
'navbar': true, // 显示缩略图导航
'title': false // 显示当前图片的标题
}
})
代码
// template
<div class="viewer-dialog-box">
<div class="img-box">
<div
class="img-wrap"
v-viewer
ref="viewer"
v-show="imgShow"
>
<img
v-for="(src,index) in imageScreen"
:src="imageScreen"
:key="index"
style="width:100%;"
>
<!-- <div ref="nodata" style="text-align: center;margin-top:100px;" v-if="!imageScreen.length">暂无数据</div> -->
</div>
</div>
</div>
// script
// 从后端获取图片信息
data() {
return {
imageScreen: [], // 拍照投屏路径
}
}
async openScreen() {
// 获取文件信息
this.imageScreen = []
const photoInfoRes = await getPhotoInfo()
console.log(photoInfoRes, 'photo info')
if (photoInfoRes.data) {
// 根据文件mediaId获取图片path
const photoId = photoInfoRes.data.fileId
console.log(photoId)
try {
const photoPathRes = await getPhotoPath(parseInt(photoId))
console.log(photoPathRes)
this.imageScreen.push(photoPathRes.data)
// this.photoScreen = true
console.log(this.$refs['viewer'])
// 直接显示图片
const viewer = this.$refs['viewer'].$viewer
viewer.show()
} catch (error) {
console.log(error)
}
} else {
this.openPhotoMessage()
}
}
// style
.viewer-dialog-box {
.img-box {
height: 0px;
margin: 0 auto;
.img-wrap {
width: 0;
height: 0;
position: relative;
cursor: pointer;
.img-wrap > div {
height: 100%;
width: 100%;
}
img {
height: 0;
width: 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
}
}