点击按钮(文字)调起elementUI大图预览

时隔一年,我又回来了 ~ 最近在做后台,遇到一个需求,就是点击“查看详情”按钮,调起elementUI的大图预览功能,预览多张图片,如下图:

首先想到的是使用element-ui的el-image组件,但它是通过点击图片来实现的,不太符合我们的需求,如果有这方面的需求可以去官网看一下;element大图预览官网实例

下面来说如何解决点击按钮预览多张图片(我写的项目最多就预览两张图片) ,使用el-image-viewer(图片查看器);

html中代码:

<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
<el-button type="text" @click="onPreview(img)">查看详情</el-button>

// 两张这样写

<el-image-viewer

              v-if="showViewer"

              :on-close="closeViewer"

              :url-list="[url1,url2]"

 />

js代码:

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

 看一下效果叭亲亲们~

就是这样子啦,完成啦 ,有问题留言(但我可能不太会哈哈哈哈哈),又是忙碌的一天,坐等下班~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/815611.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch中父子文档的关联:利用Join类型赋予文档的层级关系

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! Elasticsearch是一个强大的搜索引擎&#xff0c;它提供了丰富的功能来满足复杂的搜索需求。其中&#xff0c;父子索引类型的join功…

蓝桥杯之注意事项

1.特殊求解的地方 2.一些数学公式 比如二叉树求全深度数值那道题 3.掌握有关库函数 #include<algorithm> 包含sort&#xff08;&#xff09;函数【排列函数】C sort()排序详解-CSDN博客&#xff0c;next_permutation()函数【求解全排列问题】求解数组大小sizeof(arr…

商业银行风险管理

商业银行风险管理 银行业风险类型概述管理信用风险管理利率风险缺口分析 持续期分析利率互换消除利率风险表外业务的风险管理 银行业风险类型概述 信用风险市场风险&#xff08;利率风险、汇率风险等市场价 格风险&#xff09;财务风险&#xff08;流动性风险&#xff09;操作…

【Java EE】 IoC详解(Bean的存储)

文章目录 &#x1f38d;Controller&#xff08;控制器存储&#xff09;&#x1f338;如何从Spring容器中获取对象&#xff08;ApplicationContext&#xff09;&#x1f338;获取bean对象的其他方式&#xff08;BeanFactory&#xff09;&#x1f338;Bean 命名约定&#x1f338;…

支持向量机模型

通过5个条件判定一件事情是否会发生&#xff0c;5个条件对这件事情是否发生的影响力不同&#xff0c;计算每个条件对这件事情发生的影响力多大&#xff0c;写一个支持向量机模型程序,最后打印5个条件分别的影响力。 示例一 为了计算每个条件对一件事情发生的影响力&#xff0c…

【Spring进阶系列丨第九篇】基于XML的面向切面编程(AOP)详解

文章目录 一、基于XML的AOP1.1、打印日志案例1.1.1、beans.xml中添加aop的约束1.1.2、定义Bean 1.2、定义记录日志的类【切面】1.3、导入AOP的依赖1.4、主配置文件中配置AOP1.5、测试1.6、切入点表达式1.6.1、访问修饰符可以省略1.6.2、返回值可以使用通配符&#xff0c;表示任…

静电场中的导体与介质

静电场可能分布于填充了各种媒质的区域。虽然媒质宏观上保持电中性&#xff0c;但其内部的各种微观带电系统不可避免地会与静电场相互作用。 一般而言&#xff0c;媒质可分为三类&#xff1a;导体、介质(绝缘体)和半导体。在静电场中半导体特性与导体类似&#xff0c;因此仅就…

964: 数细胞

样例&#xff1a; 解法&#xff1a; 1.遍历矩阵 2.判断矩阵[i][j]&#xff0c;若是未标记细胞则遍历相邻所有未标记细胞并标记&#xff0c;且计数 实现&#xff1a;遍历相邻所有未标记细胞 以DFS实现&#xff1a; function dfs(当前状态) {if (终止条件) {}vis[标记当前状…

PyQt5结合Yolo框架打包python为exe文件完整流程

一、准备 1.安装 pyinstaller pip install pyinstaller 更新&#xff08;初次安装忽略&#xff09; pip install --upgrade pyinstaller 2.安装 auto-py-to-exe 安装 pip install auto-py-to-exe 打开工具 auto-py-to-exe.exe auto-py-to-exe 可视化转换工具&#xff1…

JAVAEE之Spring AOP

1. AOP概述 AOP是Spring框架的第⼆⼤核⼼(第⼀⼤核⼼是IoC) 1.1 什么是AOP&#xff1f; • Aspect Oriented Programming&#xff08;⾯向切⾯编程&#xff09; 什么是⾯向切⾯编程呢? 切⾯就是指某⼀类特定问题, 所以AOP也可以理解为⾯向特定⽅法编程. 什么是⾯向特定⽅法编…

jenkins+docker集成harbor实现可持续集成

目录 一、前言 二、Harbor介绍 2.1 什么是Harbor 2.1.1 Harbor架构图 2.2 Harbor 特征 2.3 Harbor 核心组件 2.4 Harbor使用场景 三、Harbor部署 3.1 安装docker compose 3.1.1 安装方式一 3.2 基于python3 pip安装docker compose 3.2.1 安装python3 3.2.2 安装pyt…

互联网轻量级框架整合之设计模式

反射技术 Java的反射技术能够通过配置类的全限定名、方法和参数完成对象的初始化&#xff0c;甚至反射某些方法&#xff0c;大大的增强了Java的可配置型&#xff0c;这也是Spring IoC的底层原理&#xff0c;Java的反射技术覆盖面很广&#xff0c;包括对象构建、反射方法、注解、…

JavaScript 中什么应用场景下必须用 map 而不是对象来实现功能

前言 很多情况下&#xff0c;能用 map 实现的功能用对象也可以实现&#xff0c;都是基于键值对&#xff0c;但是在一些情况下&#xff0c;必须要使用 map 才可以。 必须用 map 而不是 object 的情况 键的类型不限&#xff1a;普通对象的键总是被转换为字符串或者 Symbols&a…

C#简单工厂模式的实现

using System.Diagnostics.Metrics; using System.Runtime.InteropServices; using static 手写工厂模式.Program;namespace 手写工厂模式 {internal class Program{public interface eats {void eat();}//定义了一个接口public class rice : eats{public void eat() {Console.…

Qt快速入门(Opencv小案例之人脸识别)

Qt快速入门&#xff08;Opencv小案例之人脸识别&#xff09; 编译出错记录 背景 因为主要使用qt&#xff0c;并且官网下载的win版本的编译好的opencv默认是vc的&#xff0c;所以我们需要自己下载opencv的源码使用mingw自行编译&#xff0c;我直接使用的vscode。 报错 报错…

【JavaWeb】Day43.MySQL概述——索引

介绍 索引(index)&#xff1a;是帮助数据库高效获取数据的数据结构 。简单来讲&#xff0c;就是使用索引可以提高查询的效率。 优点&#xff1a; 1. 提高数据查询的效率&#xff0c;降低数据库的IO成本。 2. 通过索引列对数据进行排序&#xff0c;降低数据排序的成本&#…

C++系列-C++前言

什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序&#xff0c;对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适&#xff0c;为了解决软件危机&#xff0c;20世纪80年代&#xff0c;计算机界提出…

Python 编程 深入了解内存管理机制、深拷贝与浅拷贝

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、对象和引用、内存管理机制 Python 中的一切都是对象&#xff0c;包括数字、字符串、列表和函数等。为了简化内存管理并提高效率&#xff0c;Python 采用了统一的对象模型。在这个模型中&#xff0c…

【考研数学】看张宇的书,高效自学攻略

张宇老师的课程&#xff0c;我建议还是认真听一下 因为张宇老师视频课并不是照本宣科的读讲义&#xff0c;他是真的有自己的教学方法 讲义上的概念&#xff0c;老师自己会在A4纸上带大家过一遍&#xff0c;并且遇到关键的知识点&#xff0c;老师会强调 张宇老师还会帮我们记…

[C语言][数据结构][链表] 双链表的从零实现!

目录 零.必备知识 0.1 一级指针 && 二级指针 0.2 双链表节点的成员列表 a. 数据 b. 后驱指针 c. 前驱指针 0.3 动态内存空间的开辟 一. 双链表的实现与销毁 1.1 节点的定义 1.2 双向链表的初始化 && 创建新节点 1.3 尾插 1.4 头插 1.5 尾删 1.6 头删 1…