-
案例
动画555.gif
- 下载引入插件
// 下载安装
npm i v-viewer -S
// main.js中引入
import Viewer from 'v-viewer' // 引入js
import 'viewerjs/dist/viewer.css' // 引入css
Vue.use(Viewer)
- 组件中使用
<template>
<viewer :images="imageList">
<img class="img-img" v-for="item in imageList" :src="item.url" :alt="item.title" :key="item.url">
</viewer>
</template>
<script>
export default {
data () {
return {
imageList: [
{
url: require('@/assets/image1.png'),
title: '寄件方资料-合同'
},
{
url: require('@/assets/image2.png'),
title: '收件方资料-发票'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.img-img {
position: absolute;
top: 20px;
right: 20px;
width: 0; //重点 ，把图片的宽高设置成0，缩略图只展示第一张图片
height: 0;
&:nth-of-type(1) {
width: 100px;
height: 200px;
}
}
</style>
