v-viewer预览图的使用(图片预览旋转/放大缩小/上下切换等)
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件。因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片img进行操作。后来,需求变更,需要在缩略图下面添加文字,所以,又在网上找了v-viewer组件,发现这个组件是缩略图功能还挺齐全的,文档资料也很详细,在此记录一下。(移动端用vant-ui的imgpr
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件。因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片img进行操作。后来,需求变更,需要在缩略图下面添加文字,所以,又在网上找了v-viewer组件,发现这个组件是缩略图功能还挺齐全的,文档资料也很详细,在此记录一下。(移动端用vant-ui的imgpreview挺不错的)
一、先安装依赖
npm install v-viewer --save
二、在main.js内引用并注册调用
//引入v-viewer
//注册
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
// 使用
Vue.use(Viewer);
Viewer.setDefaults({
'inline':false,//是否直接展示
'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",
debug: true,
defaultOptions: {
zIndex: 9999
}
});
三、在vue页面中使用
<template>
<div v-viewer="options" class="images clearfix" v-if="detailShow">
<template v-for="{source, thumbnail ,index,captureTime} in images">
<template>
<div class="imgList">
<img
:src="thumbnail"
onerror="this.src='http://xxxx-smartgo.oss-cn-shanghai.aliyuncs.com/haik/placeholder.png'"
:data-source="source"
class="image"
:key="index" alt="">
<i class="imageDate">
<i>{{captureTime}}</i>
</i>
</div>
</template>
</template>
</div>
</template>
<script>
export default {
data() {
return {
options: {
toolbar: true,
url: 'data-source'
},
sourceImages:[],
images:[],
}
},
methods:{
handleClick(row) {//查看按钮
this.getThirdHaikEventList(row.indexCode);
},
//根据设备获取报警图片
async getThirdHaikEventList(val) {
this.loading = true;
const params = {
v: "v1.0",
type: 8008,
start: this.pageNumPhoto ? this.pageNumPhoto : '0',
limit: '12',
deviceIndexCode: val,
beginTime: startTime,
endTime: endTime,
eventType: '131594', //事件类型
};
let data = await this.$http.get('/bi/elevatorMonitor/getThirdHaikEventList', { params });
if (data && Object.keys(data).length) {
data.list.forEach(item => {
item.source = item.imageUrl; //大图
item.thumbnail = item.imageUrl; //小图
item.index = item.id;
item.captureTime = item.createTime.slice(0,4) + '年' + item.createTime.slice(5,7) + '月' + item.createTime.slice(8,10) + '日' + '' + item.weekStr + item.createTime.slice(10);
})
this.sourceImages = data.list;
this.images = data.list;
this.totalPhoto = data.total;
this.loading = false;
if(data.list.length > 0){
this.detailShow = true;
}
}else {
this.sourceImages = [];
this.images = [];
this.totalPhoto = data.total;
this.loading = false;
}
},
}
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.imgList{
float: left;
width: calc(24% - 10px);
margin: 5px;
}
.image {
width: 100%;
cursor: pointer;
display: inline-block;
}
.imageDate{
display: inline-block;
width: 100%;
text-align: center;
color: #000;
i {
font-style: normal;
}
}
</style>
效果图如下所示:
四、扩展问题
1.onerror事件
背景: 在实际开发中,当出现网速较慢的时候,部分图片会因为加载不出来,而出现破损的问题。所以,我们可以使用占位符图片。通过给img添加onerror事件,来解决这个问题。
定义和用法:onerror事件在加载外部文件(文档或图像)发生错误时触发。
<img :src="thumbnail"
onerror="this.src='http://xxxx-smartgo.oss-cn-shanghai.aliyuncs.com/haik/placeholder.png'"
:data-source="source" class="image" :key="index" alt="">
2. vue相关报错:< template v-for> key should be placed on the < template> tag
因为示例中,将v-for循环写在了template标签中,导致编辑器出现“< template v-for> key should be placed on the < template> tag”。
原因 : v-for是循环指令,它会返回多个值,而这里的template是根节点,根节点,根节点只有一个,根节点不能有多个,所以v-for写在根节点上就有问题。
解决 : 在其外面可以包裹一层div,使其不是根节点即可。加div会被渲染出来,如果不想被渲染,也可以加template标签即可。
<div v-viewer="options" class="images clearfix" v-if="detailShow">
<template v-for="{source, thumbnail ,index,captureTime} in images">
<template>
<div class="imgList">
<img :src="thumbnail"
onerror="this.src='http://xxxx-smartgo.oss-cn-shanghai.aliyuncs.com/haik/placeholder.png'"
:data-source="source" class="image" :key="index" alt="">
<i class="imageDate">
<i>{{captureTime}}</i>
</i>
</div>
</template>
</template>
</div>
解释: 在一个组件中怎么会有多个template嵌套?第二个template其实相当于自带隐藏属性的容器,这里也可以用div来代替,但div的话就会被渲染成元素。
第二个template可以放执行语句,最终编译后不会被渲染成元素。一般常和v-for和v-show一起结合使用,这样,会使整个html结构没有那么多多余的元素,整个结构会更加清晰。
五、v-viewer相关资料
①v-viewer文档资料 https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/
②v-viewer实例Demo网站 https://mirari.cc/v-viewer/
③v-viewer的github地址 https://github.com/mirari/v-viewer
④v-viewer使用指令的示例 https://github.com/mirari/v-viewer/blob/master/example/views/example/DirectiveExample.vue
参考博客: vue viewerjs实现图片预览旋转/放大缩小/上下切换等功能 https://segmentfault.com/a/1190000039952732?utm_source=sf-similar-article
vue图片点击放大预览 https://www.cnblogs.com/zhengzemin/p/v-viewer_vue-photo-preview.html
v-viewer 预览图简单使用 https://www.jianshu.com/p/80771b3956fd/
onerror 事件 https://m.runoob.com/jsref/event-onerror.html
https://www.cnblogs.com/willingtolove/p/9544576.html
vue中中v-for的使用以及多层嵌套问题 https://www.cnblogs.com/jennydtt/p/10277493.html
VUE 设置加载默认图片 https://www.jianshu.com/p/72b7350a136f
图片加载失败优化处理 https://www.cnblogs.com/zhuzhenwei918/p/6891368.html
更多推荐
所有评论(0)