Plug-in making

  • Github.com/fengyuanche…

Requirements describe

For the list of images we want to view (zoom in, zoom out, rotate, etc.), we need to use the plug-in

The sample

Install dependencies

  • npm install viewerjs --save

Reference it on the required page

import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
Copy the code

The HTML code

<template>
  <div id="index">
    <ul>
      <li v-for="(item, index) in imgArr" :key="index">
        <img :src="item" />
      </li>
    </ul>
  </div>
</template>
Copy the code

Js code

    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, {});
    }
Copy the code

Change the image address to your own image address

CSS code

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;
}
Copy the code

Click on the picture to achieve the effect. The next chapter introduces how to upload the background returned pictures to do preview display effect (there are some different, look forward to yo)