elementui el-image组件点击按钮预览图片-程序员宅基地

技术标签： vue

今天遇到一个新的需求，点击按钮查看图片，且图片能放大缩小。如下图：
在这里插入图片描述
想到了使用element-ui的el-image组件，官网示例：

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

<script>
  export default {
    data() {
      return {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>

但该组件是点击图片实现的预览，那怎么用按钮触发呢？

方法：给el-image标签加上ref属性

<span v-for="(img, index) in item.imgs" :key="index">
<button @click="previewPic(index)">点击预览</button> -->
<el-image 
    style="width: 100px; height: 100px"
    :src="img" 
    :preview-src-list="item.imgs">
    ref="previewImg"
  </el-image>
</span>

methods内：

// 点击按钮预览图片
    previewPic(index) {
      this.$refs.preview[index].showViewer = true
    }

在这里插入图片描述
这个组件用来实现类似上图的图片预览，确实很好用

but。。这样虽然可以实现预览，但当页面有多张图片的时候，this.$refs.previewImg获取到的是当前页面所有的图片，那么显示预览就会有问题

so，针对这种一个页面多个图片的问题，想要实现我一开始的需求，可以使用el-image-viewer(图片查看器)，话不多说，直接上代码

<button @click="onPreview(img)">预览</button>
        <el-image-viewer
             v-if="showViewer"
             :on-close="closeViewer"
             :url-list="[url]"
        />

<script>
	// 导入组件
  	import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
</script>
export default {
  components: {
    	ElImageViewer
  },
  data() {
  	return {
  		showViewer: false, // 显示查看器
  		url: ''
  	}
  },
  methods(){
  	// 点击按钮预览图片
      onPreview(img) {
      this.url = img
      this.showViewer = true
    },
    // 关闭查看器
      closeViewer() {
      this.showViewer = false
    },
  }

因为我是只要按钮展示点击的那行的图片，所以这样就可以完美实现我的需求啦~~

记录分享下

本文链接：https://blog.csdn.net/weixin_50248514/article/details/115700438

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

linux给文件授权_linux 授予文件-程序员宅基地

文章浏览阅读1.1w次。文件权限分为：读，写，可执行每个文件分为三种用户：主用户，同组用户，其它系统用户用10位来表示：drwxr-xr-x第一位代表文件类型 - 代表普通文件 d 代表目录其余每三位代表一种用户的权限授权命令：eg: chmod u+x test表示给test文件增加可执行权限（u，g，o 分别代表三种用户 + 和 - 代表增加或者去掉权限 r_linux 授予文件

文章浏览阅读2.1k次，点赞5次，收藏13次。点击上方“程序员大咖”，选择“置顶公众号”关键时刻，第一时间送达！以下是关于程序员的一些笑话，据说看懂的人都还在加班中。0. 老婆给当程序员的老公打电话：下班顺路买十个包子，如果看到卖西瓜的，买一个。当晚老公手捧一个包子进了家门。老婆怒道：你怎么只买一个包子？！老公甚恐，喃喃道：因为我真看到卖西瓜的了。”1. 一程序员去面试，面试官问：“你毕业才两年，这三年工作经验是怎么来的？！”程序员答：“加班_程序猿暖心告白

微机原理基本常用操作指令_jnc微机原理-程序员宅基地

文章浏览阅读1.9w次，点赞32次，收藏212次。MOVE 目的操作数或地址源操作数或地址常用PUSH 压字入栈POP 从栈弹出字ADD 加法 add a,b 将a+b值存到a中INC 加一ADC 带进位的加法 add a,b 将a+b+cf存到aSUB 减法SBB 带错位减法要考虑是否借位MUL 无符号乘法.IMUL 整数乘法.以上两条,结果回送AH和AL(字节运算),或DX和AX(字运算),DIV 无符号除法...._jnc微机原理

vagrant 安装_vagrant install-程序员宅基地

文章浏览阅读990次。手机版繁體你好，游客登录注册搜索首页Linux新闻Linux教程数据库技术Linux编程服务器应用Linux安全Linux下载Linux主题Linux壁纸Linux软件数码手机电脑首页 → Linux教程背景：阅读新闻Ubuntu下安装部署Vagrant和VirtualBox详解[日期：2018-04-08]来源：cnblogs.com/suhaha 作者：霍比挫人[字体：大中小]一、前..._vagrant install

某眼字体反爬分析(K近邻算法解决动态字体加密)_k近邻算法与css动态字体加密-程序员宅基地

文章浏览阅读1k次。郑重声明：本项目的所有代码和相关文章，仅用于经验技术交流分享，禁止将相关技术应用到不正当途径，因为滥用技术产生的风险与本人无关。文章仅源自个人兴趣爱好，不涉及他用，侵权联系删上一次简单罗列了字体反爬的前世今生(https://mp.csdn.net/console/editor/html/105490137)本文就进行实战分析url：https://maoyan.com/boar..._k近邻算法与css动态字体加密

R语言回归篇: 线性回归模型的建立与应用_r语言中想要做线性回归应该用什么命令-程序员宅基地

文章浏览阅读391次。我们可以使用R语言的summary()函数查看线性回归模型的摘要信息，包括模型拟合优度、系数估计和显著性等。# 查看模型摘要。_r语言中想要做线性回归应该用什么命令