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;
}
複製代碼

點擊圖片便可實現效果。下篇介紹如何對上傳後臺返回的圖片作預覽展現的效果（有那麼一丟丟不同，期待喲）