Sky_Tsumugi 2022-06-08 17:13 采纳率: 73.3%
浏览 368
已结题

element plus 图片预览

需求:点击按钮展开某一张图片的预览
代码
<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;
}
运行结果及报错内容

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

img

  • 写回答

3条回答 默认 最新

  • Sky_Tsumugi 2022-06-20 11:14
    关注

    直接使用内置组件,

    <el-image-viewer
          v-if="imgPreviewObject.showImageViewer"
          :url-list="imgPreviewObject.imageList"
          @close="closeImgViewer"
        />
    imgPreviewObject.showImageViewer 用来控制组件是否展示,
    imgPreviewObject.imageList 就是预览的图片列表srcList
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 6月28日
  • 已采纳回答 6月20日
  • 创建了问题 6月8日

悬赏问题

  • ¥15 小贝360-4 配二个 华772S 设置WⅰFi5G 连接
  • ¥15 vs2022的QT报错,好像是缺少winextras
  • ¥15 怎么看 cst中一个面的功率分布图
  • ¥15 c语言数据结构求9999
  • ¥15 Fiddler无法对部分小程序抓包
  • ¥60 Python代码 ip首部检验和计算代码 版本协议 首部长度 源地址 目的地址 存活时间
  • ¥18 微机原理汇编的综合实验
  • ¥15 LD衰减图用R语言对其可视化
  • ¥15 Mermaid语法生成的svg在Axure无法编辑
  • ¥15 Windchill二次开发