How to realize a picture magnification function by using press in Vue

Most people do not understand the knowledge points of this article "how to use press in Vue to achieve a picture magnification function", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve a picture magnification function using press in Vue" article.

Introduction of fancybox

The cdn of fancybox can be added directly to the head tag of the .vuepress / config.js file, and because it depends on jquery, jquery is also introduced.

Module.exports = {head: [/ / add jquert and fancybox ['script', {src:' https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js'}], ['script', {src:' https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js'}], ['link', {rel:' stylesheet', type: 'text/css' Href: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css'}]], themeConfig: {/ / your config}}

Then modify the markdown of the picture

! [xx] (sss)

Change the above format to the one below, and manually add the a tag, data-fancybox, and href attributes.

! [xx] (sss)

But it's too troublesome to add it manually, and it's not convenient to cancel it.

So I wrote a VSCode plug-in for batch formatting.

VScode Store search for vuepress-img-format installation.

Call the command img format to format all the images in the current document, and img reset format can reset the format. The effect is as follows:

Of course, you can also use built-in shortcuts:

Shortcut key format reset format Windows/LinuxCtrl + Shift + 8Ctrl + Shift + 8MacCmd + Shift + 8Cmd + Shift + 9 above is about "how to use press in Vue to achieve a picture magnification function" the content of this article, I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more related knowledge content, please pay attention to the industry information channel.