A brief introduction hevue – img – preview

This component is based on VUE, only passed in an image address, you can realize the image preview effect, more suitable for the article and page to add preview effect, preview background color, close button color, control bar background and font color can be customized, compatible with Ie9 +, Firefox, Safari, Google browser, However, there is no support for multi-image preview. If you can help you, I hope you can go to GitHub github.com/heyongsheng to give a little star

Sample preview

Online documentation

Method of use

Install hevueImgPreview --save # main.js import hevueImgPreview from 'hevue-img-preview' <img: SRC =" SRC "@click="previewImg(url)"> { previewImg (url) { this.$hevueImgPreview(url) } }Copy the code

Configurable item

The this.$hevueImgPreview() method can receive either a string url or an object configuration as follows

  • this.$hevueImgPreview('img.png')

  • This.$hevueImgPreview({url: ‘img.png’}) can be configured as follows

field value note
url http://shiliqingshan.com/web/static/img/logo.1f4d568.png Picture address
mainBackground #ffforRgba (255255255, 1) Overall background color
controlColor #ffforRgba (255255255, 1) Control bar font color
controlBackground #ffforRgba (255255255, 1) Control bar background color
closeColor #ffforRgba (255255255, 1) Close the color of the icon

The authors note

In the process of development, many things were abandoned for performance and compatibility, such as background Gaussian blur background-filter and font color and background color gradient. However, in order to meet your personalized requirements, this plug-in as far as possible to do personalized customization, you can match their own color matching project theme, if you have questions, please comment