element plus 图片预览

Question

需求：点击按钮展开某一张图片的预览

代码

<div>
      <el-button
        type="text"
        icon="View"
        v-hasPermi="['tool:gen:preview']"
        @click="imgPreview()"
        >图片预览</el-button
      >
      <!-- 图片预览 -->
      <el-image
        style="width: 100px; height: 100px"
        id="previewImg"
        src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
        :preview-src-list="srcList"
        fit="cover"
        ref="previewImg"
      />
    </div>


/** 图片预览 */
function imgPreview() {
  console.log(proxy.$refs["previewImg"]);
  srcList.value = [
    "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
  ];
  proxy.$refs["previewImg"].showViewer = true;
}

运行结果及报错内容

点击按钮设置属性，但是图片预览并没有打开，请问该怎么打开

Answer 1

直接使用内置组件，

<el-image-viewer
      v-if="imgPreviewObject.showImageViewer"
      :url-list="imgPreviewObject.imageList"
      @close="closeImgViewer"
    />
imgPreviewObject.showImageViewer 用来控制组件是否展示，
imgPreviewObject.imageList 就是预览的图片列表srcList