Always full of hope for life, for difficulties and hardships, smile to deal with.

preface

Click on a small image in a project to view the larger image. It is a common need to rotate, zoom in, and zoom out on the larger image. Today I will share how the V-Viewer plug-in is used in a VUE project. First take a look at the final effect (the picture is large, click the link to view it)

GIF rendering

Installing a plug-in

  • The terminal execution
yarn add v-viewer
Copy the code

The use of plug-in

  • Add the following code to main.js
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

// Image loading plugin
Vue.use(Viewer,{name: 'viewer'});
Copy the code
  • Add the following code to the required components

The dom part

<template>
 <! Image view plugin -->
 <div class="images" v-viewer="{movable: false}" style="display: none">
   <img v-for="src in images" :src="src" :key="src">
 </div>
</template>

Copy the code

Js part

export default {
   data() {
      return {
        images: []},mounted: function () {
     // Image viewer plugin
     show () {
       // Find the.images div mounted to $viewer
       const viewer = this.$el.querySelector('.images').$viewer
       viewer.show()
     }
   }
 }
Copy the code
  • Called in a method

Push as many images as you need to display into the images array

viewLargerImage: function(event){
  const imgSrc = event.target.src;
  if(typeofimgSrc ! = ="undefined") {// Empty the image array
    this.images = [];
    this.images.push(imgSrc);
    this.show(); }}Copy the code

Online experience address: chat – system | sample code address: chat – system

See the plug-in NPM repository: V-Viewer for more information on how to use it

Write in the last

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in nuggets. Reprint is prohibited without permission 💌