v-viewer installation
npm install v-viewer --save
use
I use it globally, under main.js
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer';
Vue.use(Viewer);
Common usage
<viewer :images="imgList">
<img v-for="src in imgList" src="src"/>
</viewer>
Do not directly use img as a subtag
In my project, my img is included in other components and cannot be directly included in the tag. In this case, you need to use the v-viewer command on the parent node that uses v-for
<div class="blog-img-list clearfix" @click.stop="" v-viewer>
<div class="blog-img-item" v-for="(item,index) in imgList" >
<el-image :src="blogImgPath+item" fit="cover" >
<div slot="error" class="image-slot" >
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</div>
Hide img tag
Sometimes we don’t need to display the picture, such as using text like [View Picture] to open the picture, then we need another way to open v-viewer
<template>
<span class="img-text">
<el-link v-for="(img,index) in imgList" type="primary" @click="show(index)" >[查看图片]</el-link>
<viewer :images="imgList" class="viewer" ref="viewer"
@inited="inited">
<img v-for="img in imgList" :src="img"/>
</viewer>
</span>
</template>
<script>
export default {
name: "ImageText",
props: ['imgList'],
methods: {
inited (viewer) {
this.$viewer = viewer
},
show(index) {
this.$viewer.view(index)
}
}
}
</script>
<style scoped>
img{
display: none;
}
</style>
Hide img, and use $viewer.view to pass in index to open