如何在Element-UI的el-image-viewer组件预览图片上添加文字？

Question

如何在通过Element-ul的 el-image-viewer组件实现的预览的图片上添加文字，例如下面这种效果

尝试在组件上添加div但是没有效果

<el-image-viewer
    v-if="showPreview"
    :urlList="previewImages"
    :on-close="closeViewer"
    :zIndex=9999

<div></div>
</el-image-viewer>

Answer 1

<el-image> 组件没有对应的插槽和 props，只能你自己改写组件，叠加在上层。

一个简单的例子：

<template>
  <div id="app">
    <MyImagePreview
      v-for="img in srcList"
      :key="img.url"
      :src="img.url"
      :preview-src-list="srcList"
      style="width: 100px; height: 100px"
    />
  </div>
</template>

<script>
import MyImagePreview from '@/components/MyImage'

export default {
  name: 'App',
  components: {
    MyImagePreview
  },
  data() {
    return {
      srcList: [
        {
          label: '图片1',
          url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        }, {
          label: '图片2',
          url: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        }
      ]
    }
  }
}
</script>

自定义 <el-image> 组件

<script>
import { Image } from 'element-ui';
import MyImageViewer from "@/components/MyImageViewer";

export default {
  name: "MyImagePreview",
  extends: Image,
  components: { ImageViewer: MyImageViewer },
}
</script>

<script>
import imageViewer from 'element-ui/packages/image/src/image-viewer.vue';

export default {
  name: "MyImageViewer",
  extends: imageViewer,
}
</script>

<!-- 复制的 ele-ui 的模板代码 -->
<template>
  <transition name="viewer-fade">
    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': viewerZIndex }">
      <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
      <!-- CLOSE -->
      <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
        <i class="el-icon-close"></i>
      </span>
      <!-- ARROW -->
      <template v-if="!isSingle">
        <span
            class="el-image-viewer__btn el-image-viewer__prev"
            :class="{ 'is-disabled': !infinite && isFirst }"
            @click="prev">
          <i class="el-icon-arrow-left"/>
        </span>
        <span
            class="el-image-viewer__btn el-image-viewer__next"
            :class="{ 'is-disabled': !infinite && isLast }"
            @click="next">
          <i class="el-icon-arrow-right"/>
        </span>
      </template>
      <!-- ACTIONS -->
      <div class="el-image-viewer__btn el-image-viewer__actions">
        <div class="el-image-viewer__actions__inner">
          <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
          <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
          <i class="el-image-viewer__actions__divider"></i>
          <i :class="mode.icon" @click="toggleMode"></i>
          <i class="el-image-viewer__actions__divider"></i>
          <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
          <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
        </div>
      </div>
      <!-- CANVAS -->
      <div class="el-image-viewer__canvas">
        <!-- 👇 只改写了这部分的业务代码 👇 -->
        <template v-for="(img, i) in urlList">
          <div v-if="i === index" :key="img.url">
            <div class="el-image-viewer__title">{{ img.label }}</div>
            <img
              ref="img"
              class="el-image-viewer__img"
              :src="img.url"
              :style="imgStyle"
              @load="handleImgLoad"
              @error="handleImgError"
              @mousedown="handleMouseDown">
          </div>
        </template>
      </div>
    </div>
  </transition>
</template>

<style>
.el-image-viewer__title {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  color: black;
  text-align: center;
  text-shadow: 1px 1px 0px white;
  z-index: 100;
}
</style>

代码可以再优化一下，但是作为示意Demo已经足够了。

Answer 2

可以使用 pnpm patch 修改 https://github.com/ElemeFE/element/blob/dev/packages/image/src/image-viewer.vue#L37 组件，让它支持 slot 。

<div class="el-image-viewer__canvas">
  <img
    v-for="(url, i) in urlList"
    v-if="i === index"
    ref="img"
    class="el-image-viewer__img"
    :key="url"
    :src="currentImg"
    :style="imgStyle"
    @load="handleImgLoad"
    @error="handleImgError"
    @mousedown="handleMouseDown" />
    <slot></slot>
</div>