在 Vue 中预览 v-html 中的所有图片

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 25 天，点击查看活动详情

场景

在渲染页面的时候，有些内容是通过接口数据返回的数据进行动态渲染的，比如操作提示、文章资讯等内容，往往会以富文本的形式存储，获取数据的时候带有 Html 标签。

在 Vue 中可以使用 v-html 指令来渲染这类数据，代码如下：

<p v-html="content"></p>

// content: "<h1>俺是标题</h1>"

当数据中包含图片的时候，想要点击图片进行大图预览，可以引入 ElementUI 的预览组件 <el-image-viewer />

el-image-viewer 组件的参数如下：

代码实现

1. 首先为添加点击事件，传递 $event 以及 数据内容

<p v-html="tipsContent" @click="tipsClick($event,tipsContent)"></p>

2. 接下来就是富文本内容中图片路径的获取

<el-image-viewer
  v-if="showViewer"
  :z-index="10000"
  :on-close="showViewer = false"
  :url-list="urlList"
/>

3. 点击事件

• 判断点击的节点（event.target.tagName）是否是图片标签（'IMG'）
• 利用正则表达式来匹配图片的 img 标签、src 路径
  • img: /<img.*?(?:>|/>)/gi
  • src: /src=['"]?([^'"]*)['"]?/i
• 将其存入数组
• 使用 Set() 对 url 进行去重
• 将 Set 转换为数组结构

wrapClick(event, item) {
  const target = event.target
  if (target.tagName === 'IMG') {
    event.preventDefault()
    const content = item
    const imgReg = /<img.*?(?:>|/>)/gi        
    const srcReg = /src=['"]?([^'"]*)['"]?/i       
    const arr = content.match(imgReg)             
    const urlArr = []
    for (let i = 0; i < arr.length; i++) {
      const src = arr[i].match(srcReg)
      urlArr.push(src[1])
    }
    this.urlList =  /src=['"]?([^'"]*)['"]?/i 
    this.urlList.unshift(event.target.src)
    const set = new Set(this.urlList)
    this.urlList = Array.from(set)
    this.showViewer = true
  }

Array.from() 转换

Array.from() 的作用：

1. 将伪数组转换成数组
2. 将 Set 或 Map 结构的数据转换为真正的数组（Set 或 Map 是类数组，不是真正的数组）

Array.from()可以接受三种类型的参数，当进行类数组的转化时，可直接传入数据。执行如下代码：

let arr1 = [1,2,3,3,2,1];
let set = new Set(arr1);
console.log(set);
let arr2 = Array.from(set);
console.log(arr2);

观察 set 和 arr2 的输出结果

set：

arr2: