使用element ui隐藏组件实现图片预览功能

elementUI是前端开发中经常需要用到的UI框架,最近在浏览element官网时发现el-image这个组件有图片预览的组件,找到其源码,发这个预览方法是封装好的组件,于是尝试单独在自己的项目中使用这个组件。

支持多图预览、旋转、放大等操作,能够满足日常所需!

image.png

1、引入组件

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

2、注册组件

components: { ElImageViewer, }

3、使用组件

<div @click="previewImage(scope.row.dealVoucher)">查看照片</div>

<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />

4、相关方法

closeViewer() {
      this.showViewer = false;
    },
    
previewImage(url) {
      var arr = url.split(",");
      for (var i = 0; i < arr.length; i++) {
        arr[i] = this.ossUrl + arr[i] + "!big";
      }
      this.srcList = arr;
      this.showViewer = true;
      
    },```
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

.故友

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值