A very easy to use Vue picture preview component, support mobile and PC single picture, multi picture preview, support zoom, drag, rotate, keyboard control


Hevue img Preview

This component is a Vue picture preview component based on Vue. It supports PC and mobile terminal, and supports single picture and multi picture preview. Only one picture address can realize picture preview effect. The mobile terminal supports single finger drag and double finger zoom. The color of each component of the page is customized to achieve personalized design. If it can help you, I hope you can moveGitHubOrCode cloudTo a little star, if you have any comments or suggestions, you are welcome to reply or submit to issue

Sample Preview

Preview website onlinehttps://heyongsheng.github.io/#/

A very easy to use Vue picture preview component, support mobile and PC single picture, multi picture preview, support zoom, drag, rotate, keyboard control


npm install hevue-img-preview --save

# main.js  introduce
import hevueImgPreview from 'hevue-img-preview'

Add any event to any object, such as
<img :src="src" @click="previewImg(url)">
You can call the method in the event to preview
methods: {
    previewImg (url) {


This. & dollar; hevueimpreview() method can receive a URL of string type or configuration of object type. The specific usage is as follows

  • Receive an address stringthis.$hevueImgPreview(url)
this.$hevueImgPreview(' https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg '// online address
this.$hevueImgPreview('./img/ logo.jpeg '// local address
  • Receive an objectthis.$hevueImgPreview(options)
#Single image preview
    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    Mainbackground: 'RGBA (0, 0, 0,. 5)', // overall background color

#Multi image preview
    Multiple: true, // enable multi image preview mode
    Nowimgindex: 1, // multi image preview. The second image is displayed by default
    Imglist: ['1. PNG ','2. PNG','3. PNG '] // multi graph array to preview
    Mainbackground: 'RGBA (0, 0, 0,. 5)', // overall background color

The specific configurable items are as follows

field value remarks
url The local or online address of the image, which can not be transferred when multiple images are previewed The address of the preview image, which is omitted in multi image preview
mainBackground #fffperhapsrgba(255,255,255,.1) Overall background color (optional)
controlColor #fffperhapsrgba(255,255,255,.1) Control bar font color (optional)
controlBackground #fffperhapsrgba(255,255,255,.1) Control bar background color (optional)
closeColor #fffperhapsrgba(255,255,255,.1) Turn off the color of the icon (optional)
multiple Boolean true / false Preview multiple images
nowImgIndex The second display format, such as 1 by default The default image subscript in multi image preview
imgList Array format [url1, URL2, url3] Array passed in during multi graph Preview
keyboard Boolean true / false Do you want to turn on keyboard control
clickMaskCLose String open / close Can I click mask layer to close

If the keyboard control event is turned on, the corresponding function control keys are as follows

Key function
w enlarge
s narrow
a Last one
d Next one
q Counter clockwise rotation
e Clockwise rotation
r Picture reset
esc Turn off picture preview

*If the compatibility is not considered, the above background colors can receive gradient colors

Author’s note

I’m a front-end Xiaobai with less work experience. I try my best to ensure that there are no bugs in what I write, but I may not be able to achieve the best performance interface. If you have any suggestions or opinions in use, you are welcome to give me feedback. You can add contact information, reply directly, or go to the websiteGitHubMake a pointissur[suggest this method]. If it’s helpful, I’m looking forward to your praiseGitHubTo a little star, your support is the biggest driving force for me to move forward. If I can go to the bottom to reward you, I wish you a safe life and never lose your hair

GitHub link:https://github.com/heyongsheng/hevue-img-preview

Code cloud link:https://gitee.com/ihope_top/hevue-img-preview