这篇“Vue中使用press如何实现一个图片放大功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中使用press如何实现一个图片放大功能”文章吧。
引入 fancybox
.vuepress/config.js 文件的 head 标签中可以直接添加 fancybox 的 cdn，由于它依赖 jquery，所以还要引入 jquery。
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
}
}然后修改图片的 markdown
将上面的这种格式修改为下面这种，手动添加 a 标签、 data-fancybox 和 href 属性即可。
<a data-fancybox title="xx" href="sss" rel="external nofollow" ></a>
但是这样手动添加太麻烦了，并且想取消掉也不方便。
所以我写了一个 VSCode 插件，来批量格式化。
VScode 商店搜索 vuepress-img-format 安装即可。
调用命令 img format 可以格式化当前文档的所有图片，img reset format 可以重置格式化，效果如下：
当然也可以使用内置的快捷键：
| 快捷键 | 格式化 | 重置格式化 |
|---|---|---|
| Windows/Linux | Ctrl + Shift +8 | Ctrl + Shift + 8 |
| Mac | Cmd + Shift + 8 | Cmd + Shift + 9 |
以上就是关于“Vue中使用press如何实现一个图片放大功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
