elementui el-image组件点击按钮预览图片

今天遇到一个新的需求，点击按钮查看图片，且图片能放大缩小。如下图：

想到了使用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-viewerv-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 = imgthis.showViewer = true},// 关闭查看器closeViewer() {this.showViewer = false},}

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

记录分享下

elementui el-image组件点击按钮预览图片相关推荐

点击预览与按钮预览图片
想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__preview"><el-image style ...
php删除图片按钮代码,jquery 按钮预览图片功能的代码，我看不太懂。应该怎么学...
摘要:<?phpnamespace app\admin\controller;use app\admin\controller\Common;use app\admin\model\NewsMo ...
uniapp点击上传图片,预览图片,删除图片
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.uniapp点击上传图片二.使用步骤 1.html部分 2.js部分 3.css部分前言提示:这里可以添加本 ...
H5在微信中点击查看预览图片
//图片预览yulanimg(index) {mep = this.list.vip_imgs //需要预览的图片数组let mmp = []for (let i = 0; i < mep.le ...
table 点击文字按钮预览图片
话不多说上代码(也是看了某位大佬的,找不到原文章了,在此感谢) 先引入 import ElImageViewer from 'element-ui/packages/image/src/image- ...
elementui 点击按钮（文字）预览图片
今天遇到一个新的需求,点击按钮查看图片,且图片能放大缩小.如下图: 想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__p ...
elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片
需求:点击查看按钮,将图片显示出来. 问题:查看按钮必须触发两次才会将图片显示出来前端效果: 点击查看按钮,弹出来图片图片展示: 解决方法有两种: 第一种调用Image 的源码中的image-v ...
[新功能]根据预览图片选择Skin
该功能主要为了方便大家选择自己喜欢的skin. 使用方法: 在管理页面中, 进入"选项"=>"Configure", 在Display Skin旁边点击& ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...

elementui el-image组件点击按钮预览图片

elementui el-image组件点击按钮预览图片相关推荐

最新文章

热门文章

elementui el-image组件 点击按钮 预览图片

elementui el-image组件 点击按钮 预览图片相关推荐

最新文章

热门文章

elementui el-image组件点击按钮预览图片

elementui el-image组件点击按钮预览图片相关推荐