Vue - 图片预览插件viewer.js的使用一

插件github

• github.com/fengyuanche…

需求描述

对于图片列表我们要进行查看（放大、缩小、旋转等）的时候，需要使用的插件

示例

安装依赖

• 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;
}
复制代码

点击图片即可实现效果。下篇介绍如何对上传后台返回的图片做预览展示的效果（有那么一丢丢不一样，期待哟）