给编辑器v-md-editor预览组件增加图片放大功能

笔特 | 12/26/2022, 1:14:34 AM | 1058 次阅读

1 简介

现在我们写博客，写文章等内容时，更多的喜欢使用Markdown语法进行编辑文章内容，我使用的是v-md-editor这一款，但是这一款编辑器没有图片的放大显示功能，于是，我就自己倒腾一个简易的函数用来让图片能够放大显示。

2 编写代码

// utils/add.img.event.ts 导出一个函数，入参是dom-id，这里只展示获取img的图片地址，如何实现图片弹窗的功能将在后续完善
export function addImgEvent(id: string) {
  if (!document) {
    console.log("document is undefined!")
    return
  }
  const img_list = document.getElementById(id)?.getElementsByTagName("img")
  if (!img_list) {
    return
  }
  for (let i = 0; i < img_list.length; i++) {
    img_list[i].onclick = function () {
      console.log(img_list[i].src)
      // TODO:获取到图片的地址后，可以使用Vue的函数式弹窗，也可以使用其他方式将图片放大
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3 使用

在需要将图片放大的页面中引入上述函数并调用，传入容器dom的id

<!-- 无关代码忽略，这里定义一个唯一id -->
<v-md-preview-html id="articleContent" :html="dataArticle.nvc_html" preview-class="vuepress-markdown-body" ref="preview">
</v-md-preview-html>
1
2
3
// 无关代码忽略，这里再mounted钩子函数中调用函数
mounted() {
  addImgEvent("articleContent")
},
1
2
3
4

4 结果展示

result.png