Vue中使用press如何實(shí)現(xiàn)一個(gè)圖片放大功能

這篇“Vue中使用press如何實(shí)現(xiàn)一個(gè)圖片放大功能”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Vue中使用press如何實(shí)現(xiàn)一個(gè)圖片放大功能”文章吧。

引入 fancybox

.vuepress/config.js 文件的 head 標(biāo)簽中可以直接添加 fancybox 的 cdn，由于它依賴(lài) 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

![xx](sss)

將上面的這種格式修改為下面這種，手動(dòng)添加 a 標(biāo)簽、 data-fancybox 和 href 屬性即可。

<a data-fancybox title="xx" href="sss" rel="external nofollow" >![xx](sss)</a>

但是這樣手動(dòng)添加太麻煩了，并且想取消掉也不方便。

所以我寫(xiě)了一個(gè) VSCode 插件，來(lái)批量格式化。

VScode 商店搜索 vuepress-img-format 安裝即可。

調(diào)用命令 img format 可以格式化當(dāng)前文檔的所有圖片，img reset format 可以重置格式化，效果如下：

當(dāng)然也可以使用內(nèi)置的快捷鍵：

以上就是關(guān)于“Vue中使用press如何實(shí)現(xiàn)一個(gè)圖片放大功能”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。