请问大家，element ui 有个图片放大的效果，如果是在文章内容页怎样实现？

Question

我有文章详情页面，里面有很多图片或者文字，内容是后端传的，请问如何做点击图片放大，翻页预览的效果呢？

Answer 1

你可以用我这个例子试试

<template>
  <div class="preview-img-test">
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :initial-index="initialIndex"
      :url-list="imgs"
    />
    <div class="desc" @click="clickDesc" ref="desc">
      <div v-html="desc"></div>
    </div>
  </div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: { ElImageViewer },
  data() {
    return {
      showViewer: false,
      initialIndex: 0,
      imgs: [],
      desc: "" // 后台返回的html详情
    };
  },
  mounted() {
    // 通过接口获取到后台文章详情
    const desc = `<h1>123</h1><img src="https://image-static.segmentfault.com/340/649/3406492799-62f0a35b044ee_fix732"/><h2>test</h2><img src="https://avatar-static.segmentfault.com/382/357/3823573014-5f8841961ba5e_big64" />`;
    this.desc = desc;
    this.$nextTick(() => {
      // 获取文章详情所有的图片
      const imgDoms = this.$refs.desc.getElementsByTagName("img");
      const imgs = [];
      for (let i = 0; i < imgDoms.length; i++) {
        if (imgDoms[i].src) {
          imgs.push(imgDoms[i].src);
        }
      }
      this.imgs = imgs;
    });
  },
  methods: {
    clickDesc({ target }) {
      if (target.tagName === "IMG" && target.src) {
        this.initialIndex = this.imgs.findIndex(r => r === target.src);
        this.showViewer = true;
      }
    },
    closeViewer() {
      this.showViewer = false;
    }
  }
};
</script>

Answer 2

这个组件eleemnt没有暴露出来，也没在文档中体现。
可参考这个文章Element Ui图片预览组件通过按钮触发图片预览&& 使用el-image-viewer，文末是使用el-image-viewer的例子