插件github
需求描述
对于图片列表我们要进行查看(放大、缩小、旋转等)的时候,需要使用的插件
示例
安装依赖
npm install viewerjs --save
在需要的页面引用
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
复制代码
HTML代码
<template>
<div id="index">
<ul>
<li v-for="(item, index) in imgArr" :key="index">
<img :src="item" />
</li>
</ul>
</div>
</template>
复制代码
js代码
data() {
return {
imgArr: [
"blob:http://localhost:8080/b0356b99-9492-4395-a82e-2c3a0bb2da84",
"blob:http://localhost:8080/b0356b99-9492-4395-a82e-2c3a0bb2da84",
"blob:http://localhost:8080/b0356b99-9492-4395-a82e-2c3a0bb2da84",
"blob:http://localhost:8080/b0356b99-9492-4395-a82e-2c3a0bb2da84",
"blob:http://localhost:8080/b0356b99-9492-4395-a82e-2c3a0bb2da84"
]
};
},
mounted() {
const ViewerDom = document.getElementById("index");
const viewer = new Viewer(ViewerDom, {});
}
复制代码
图片地址改为自己的图片地址
CSS代码
li {
margin-right: 15px;
margin-bottom: 15px;
width: 25%;
height: 200px;
display: inline-block;
}
li:hover{
cursor: zoom-in;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
复制代码
点击图片即可实现效果。下篇介绍如何对上传后台返回的图片做预览展示的效果(有那么一丢丢不一样,期待哟)