首先使用Tinymce富文字元件這裡不說–>自行百度

我實現的方式 使用js去操作獲取class然後給他新增單擊事件，同時也把所有src地址全部放在一個數組裡面，最後點選的時候去遍歷一下陣列獲取下標，就能是實現了

下面是我的程式碼（我這裡採用了元件遞迴，所以看著比較麻煩，單元件的就沒這麼複雜）

外層元件1

<template>
  <el-card v-if="showHandler" class="box-card">
    <div slot="header" class="clearfix">
      <h3 style="float:left;padding: 0;margin: 0">{{ this.$route.query.title }}</h3>
    </div>
    <detail ref="detailRef" :image-views="imageViews" :tooltip="tooltip" :detail-list="remarkList" @onReplyClick="handleReplyClick" />
  </el-card>
</template>

<script>
import detail from './detail'

export default {
  name: 'HandlerRemark',
  components: {
    detail
  },
  props: {
    remarkList: {
      type: Array,
      default: () => []
    },
    tooltip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      handlerTitle: '',
      showHandler: true,
      imageViews: []
    }
  },
  created() {
    this.handlerTitle = this.$route.query.title
    this.showHandler = this.handlerTitle !== '' && this.handlerTitle !== 'null'
  },
  mounted() {
    setTimeout(() => {
      this.initImgs()
    }, 500)
  },
  methods: {
    handleReplyClick(row) {
      this.$emit('onReplyClick', row)
    },
    // 初始化獲取當前頁面所有指定class的圖片標籤
    initImgs() {
      const that = this
      const tinymceP = document.getElementsByClassName('card_images')
      if (tinymceP.length !== 0) {
        for (let j = 0; j < tinymceP.length; j++) {
          const imags = tinymceP[j].getElementsByTagName('img')
          for (let i = 0; i < imags.length; i++) {
            if (imags[i].src.includes('Images')) {
              if (that.imageViews.indexOf(imags[i].src) === -1) {
                that.imageViews.push(imags[i].src)
                imags[i].addEventListener('click', function(ev) {
                  var target = ev.target || ev.srcElement
                  if (target.nodeName.toLowerCase() === 'img') {
                    // 防止事件冒泡
                    ev.stopPropagation()
                    that.$refs.detailRef.imageIndexClick(imags[i].src)
                  }
                }, false)
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.el-card{
  .el-card__body{
    padding-top:0
  }
}
</style>

裡面的內容元件

<template>
  <div>
    <el-timeline>
      <el-timeline-item v-for="(item) in detailList" :key="item.id" placement="top" :timestamp="(item.creator === 'admin'?'回答：':'提問：')+item.createTime">
        <el-card class="mouse-style" shadow="hover" @click.native="handleReplyClick(item)">
          <h4>{{ item.creator }} </h4>
          <el-tooltip v-if="tooltip" class="item" effect="dark" content="點選回覆" placement="top">
            <p class="card_images" style="padding: 0;margin: 0" v-html="item.demandRemark" />
          </el-tooltip>
          <p v-else class="card_images" style="padding: 0;margin: 0" v-html="item.demandRemark" />
        </el-card>
        <detail ref="detailRef" :key="item.createTime" :tooltip="tooltip" :detail-list="item.aydDemandDetailList" @onReplyClick="handleReplyClick(item)" />
      </el-timeline-item>
    </el-timeline>
    <el-image-viewer v-if="showViewer" :on-close="()=>{showViewer=false}" :url-list="imageViews" :initial-index="imageIndex" />
  </div>
</template>

<script>
// 需要單獨引用 element的預覽圖外掛
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'Detail',
  components: {
    'el-image-viewer': ElImageViewer
  },
  props: {
  	// 資料
    detailList: {
      type: Array,
      default: () => []
    },
    // Tooltip 文字提示
    tooltip: {
      type: Boolean,
      default: true
    },
    // 預覽圖裡面的圖片SRC陣列
    imageViews: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    // 是否顯示預覽圖
      showViewer: false,
      // 預覽圖初始下標
      imageIndex: 0
    }
  },
  methods: {
  // 單擊獲取當前行
    handleReplyClick(row) {
      this.$emit('onReplyClick', row)
    },
    
    // 單擊某個圖片獲取SRC地址 通過父元件的ref呼叫
    imageIndexClick(src) {
      if (!src) {
        this.imageIndex = 0
        this.showViewer = true
        return
      }
      for (let i = 0; i < this.imageViews.length; i++) {
        if (this.imageViews[i] === src) {
          this.imageIndex = i
          break
        }
      }
      this.showViewer = true
    }

  }
}
</script>
<style lang="css" scoped>

</style>
<style lang="scss" scoped>
.mouse-style :hover {
  cursor: pointer
}

::v-deep img[src*="Images"] {
  width: 50%;
}
</style>