Vue-photo-preview

We all know thatAnt-DesignThere are expected properties that come with images, just addpreviewProperty can be full screen zoom images, and even make a photo collection, very beautiful and easy to use. But if we use itElementUI, also want to achieve this effect? Try vue-photo-preview. Let’s go!!!

The introduction of vue – photo – preview

npm i vue-photo-preview --save 
// First we install vue-photo-preview in our local project
Copy the code

Register components and styles in main.js

import preview from "vue-photo-preview";
import "vue-photo-preview/dist/skin.css";
// Also introduce vUE components
import Vue from "vue";
// Then use our vue-photo-preview in Vue
Vue.use(preview);
// So we can preview the image
Copy the code

However, when we look at the source code, we find that it also requires property selection. If no options are passed, the default Settings will be used. Here we take a look at the official website, summarize some useful attributes, and recommend a set of attributes for you.

The following figure is the default configuration of the source code

let options = {
    index:0.// Start slide index. Zero is the first slide. Must be an integer. Default is 0
    showAnimationDuration:333.// The transition time of the image enlargement preview must be digital, default is 333 ms
    hideAnimationDuration:333.// As the name implies, the transition animation time for the hidden image must be a number, which defaults to 333 msBgOpacity:0.85.// Background opacityMaxSpreadZoom:2.// The maximum zoom level when performing the expand (zoom) gesture. '2' means the image can be enlarged twice from its original sizeLoop:true.// By default, images are rotatedPinchToClose:true.// Exit the album set when the image is shrunk
    closeOnScroll: true.// Exit album while scrolling, default true, recommended false
    modal:true.// Controls whether the image should expand to take up the entire viewport. If false, the PhotoSwipe element takes the size of the template's location parent, which defaults to true
    fullscreenEl: false.// Controls whether to display the full-screen button in the upper right corner
    closeEl: false.// Controls whether to display the close button in the upper right corner
    tapToClose: false.// Click the slide area to close the gallery
    shareEl: false.// Controls whether the share button is displayed
    zoomEl: false.// Control whether the zoom button is displayed
    counterEl: true.// Controls whether to display the number of images in the upper left corner button
    tapToToggleControls: true.// Click to toggle control visibility
    clickToCloseNonZoomable: true.// Clicking on an image should close the gallery, only if the image is smaller than the viewport size
    indexIndicatorSep: '/'.// A separator for the number of images
}
Copy the code

Through my explanation, we should understand the meaning of the attribute, you can set the preview effect of your own personality, here I recommend a configuration in my project

// If the default Settings are not important, use the default Settings
letOptions = {maxSpreadZoom:1.// The maximum zoom level when performing the expand (zoom) gesture. '2' means the image can be enlarged twice from its original sizeLoop:true.// By default, images are rotatedPinchToClose:true.// Exit the album set when the image is shrunk
    closeOnScroll: true.// Exit album while scrolling, default true, recommended false
    fullscreenEl: false.// Controls whether to display the full-screen button in the upper right corner
    closeEl: false.// Controls whether to display the close button in the upper right corner
    tapToClose: false.// Click the slide area to close the gallery
    shareEl: false.// Controls whether the share button is displayed
    zoomEl: false.// Control whether the zoom button is displayed
    counterEl: true.// Controls whether to display the number of images in the upper left corner button
    indexIndicatorSep: '/'.// A separator for the number of images
}
// Then pass our configuration to Preview
Vue.use(preview,options);
Copy the code

How do we use it in our projects?

<img src="url" alt="" width="200px"  height="200px" preview="1">
// Preview can pass in fixed values, either numbers or strings. Images with preview values are grouped into an album set. A different preview is a separate image preview
Copy the code

By extension, if it’s a normal HTML page, how do you use it?

 // Add the CSS style file and vue-photo-preview addresses, and you can use them
<link rel="stylesheet" type="text/css" href=".. /dist/skin.css"/>
<script src=".. /dist/vue-photo-preview.js" type="text/javascript" charset="utf-8"></script>
<img v-for="item in img1" :src="item" preview="1" preview-text="Description">
Copy the code

Side of thereview-textIt refers to the picture description below the picture, you can use it directly

Put two pictures of PC and mobile

conclusion

If you find this article helpful, give me a thumbs up and a little encouragement

Portals for other interesting articles:

  • Learn all the methods in an Array prototype
  • An article on all the methods to master Object prototypes
  • Introduction to Vue3, let you know the difference between Vue2 and Vue3 (1)
  • Strange prototype chain cold knowledge (need to have a certain prototype chain foundation to see oh)
  • Hand touch teaches you to write a responsive page from 0 using Echart