# Vue前端对于管理后台表格富文本图片展示+预览

描述：很多项目后台需要展示用户提交的内容，内容可能是使用富文本编辑器生成的，其中就包含文字，图片，视频等等，针对最普遍的现象那就是对于图片的展示，因为运营人员注重的是内容，格式不会要求一定像用户编辑时那样，所以就需要技术对内容展示格式化，例如无论客户端提交的图片尺寸多大，在后台表格中限制统一尺寸，并且支持点击预览

实现:

1. 首先需要将拿到的数据借助正则进行格式化,目的是给所有的图片加上标识，如下给图片加上了类名限制:

  // 处理接口数据
  res.data.list.forEach(item => {
    item.answer = item.answer.replace(/\<img/gi, '<img class="answerImg"')
  })
  
  // 添加css样式
  ::v-deep .answerImg {
      width: 100px;
      height: auto;
  }

2. 由于内容可能很长，所以肯定不能直接在表格中展示，在elementUi中可以使用如下组件,鼠标悬停就可展示全部内容：

// html
<el-tooltip placement="top" effect="light">
    <div slot="content">
      <div v-html="row.answer" @click="preview"></div>
    </div>
    <el-button>详情</el-button>
</el-tooltip>

3. 由于前端对拿到的图片做了同一尺寸限制，所以需要新增点击图片预览功能：

// html
<!-- 预览图片 -->
<div class="el-dialog__wrapper dialog-container" id="imgBox" v-if="isView"
    @click="()=>isView=false">
</div>

// js
// 通过target获取目标事件
preview (e) {
  if (e.target.className === 'answerImg') {
    console.log(e.target.currentSrc)
    this.isView = true
    this.$nextTick(() => {
      const el = document.getElementById('imgBox')
      const node = document.createElement('img')
      node.src = e.target.currentSrc
      el.appendChild(node)
    })
  }
}

// css
::v-deep #imgBox {
  z-index: 20001;
  background-color: rgba(0, 0, 0, 0.2);
  img {
    width: 500px;
    height: auto;
    width: 50%;
    margin-top: 20px;
    margin-left: 25%;
  }
}

最终实现如下：

• 鼠标悬浮

• 点击图片预览，支持多张图片，做到点击哪里显示哪里