element 点击button弹出图片 运用自带隐藏的图片查看器el-image-viewer浏览图片

最近在开发一个图片预览效果,由于位置有限,没有原始的缩略图。

看了下elementUI的文档,基本都是需要有缩略图的情况下,才能有放大的图。

所以网上找了下有个不错的方案,其实也是elementUI自带的功能,只是API文档里面没有罢了。

ElImageViewer是自带的组件,需要引入,然后在系统内注册成为组件。

详情见代码:

template><div><el-button @click="onPreview">预览</el-button><el-image-viewer  v-if="showViewer" :on-close="closeViewer" :url-list="[url]" /></div>
</template>
<script>// 导入组件import ElImageViewer from 'element-ui/packages/image/src/image-viewer'export default {name: 'Index',components: { ElImageViewer },data() {return {showViewer: false, // 显示查看器url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'}},methods: {onPreview() {this.showViewer = true},// 关闭查看器closeViewer() {this.showViewer = false}}
</script>

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

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

相关文章

论文查重怎么找到需要更改的【详细说明】

大家好&#xff0c;今天来聊聊论文查重怎么找到需要更改的&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 论文查重怎么找到需要更改的 论文查重是保证学术诚信和提高论文质量的重要环节小发猫伪原创。…

班级管理的重要性

班级管理&#xff0c;就像是一座桥&#xff0c;连接着学生和老师&#xff0c;它的重要性不言而喻。 营造良好的学习氛围 班级管理不仅仅是维护秩序&#xff0c;更是营造一个积极向上的学习氛围。一个好的班级管理&#xff0c;能让学生更加专注于学习&#xff0c;提高学习效率。…

Linux上的MAC地址欺骗

Linux上的MAC地址欺骗 1、查看mac地址法1&#xff1a;ifconfig法2&#xff1a;ip link show 2、临时性改变 MAC 地址法1&#xff1a;使用iproute2工具包法2&#xff1a;使用macchanger工具 3、永久性改变 MAC 地址3.1 在 Fedora、RHEL下实践3.2 在 Debian、Ubuntu、Linux Mint下…

人工智能革命近在咫尺:利用数据实现社会影响、增强决策力和新机遇

人工智能&#xff08;AI&#xff09;是指由计算机系统或机器执行的智能行为&#xff0c;如学习、推理和解决问题。人工智能不再是科幻小说中的事物&#xff0c;而是已经成为我们日常生活中不可或缺的一部分。从语音助手到自动驾驶汽车&#xff0c;从人脸识别到机器翻译&#xf…

数据结构之----原码、反码、补码

数据结构之----原码、反码、补码 什么是原码&#xff1f; 原码&#xff1a;我们将数字的二进制表示的最高位视为符号位&#xff0c;其中 0 表示正数&#xff0c;1 表示负数&#xff0c;其余位表示数字 的值。 什么是反码&#xff1f; 反码&#xff1a;正数的反码与其原码相…

网络攻击(二)--情报搜集阶段

4.1. 概述 在情报收集阶段&#xff0c;你需要采用各种可能的方法来收集将要攻击的客户组织的所有信息&#xff0c;包括使用社交网络、Google Hacking技术、目标系统踩点等等。 而作为渗透测试者&#xff0c;你最为重要的一项技能就是对目标系统的探查能力&#xff0c;包括获知…

文生图:AE/VAE/VQVAE/VQGAN/DALLE模型

文生图模型演进&#xff1a;AE、VAE、VQ-VAE、VQ-GAN、DALL-E 等 8 模型本文中我们回顾了 AE、VAE、VQ-VAE、VQ-VAE-2 以及 VQ-GAN、DALL-E、DALL-E mini 和 CLIP-VQ-GAN 等 8 中模型&#xff0c;以介绍文生图模型的演进。https://mp.weixin.qq.com/s/iFrCEpAJ3WMhB-01lZ_qIA 1…

pta模拟题(7-38 完全二叉树的层序遍历)

一个二叉树&#xff0c;如果每一个层的结点数都达到最大值&#xff0c;则这个二叉树就是完美二叉树。对于深度为 D 的&#xff0c;有 N 个结点的二叉树&#xff0c;若其结点对应于相同深度完美二叉树的层序遍历的前 N 个结点&#xff0c;这样的树就是完全二叉树。 给定一棵完全…

GaussDB数据库语法及gsql入门

一、GaussDB数据库语法入门 之前我们讲了如何连接数据库实例&#xff0c;那连接数据库后如何使用数据库呢&#xff1f;那么我们今天就带大家了解一下GaussDB&#xff0c;以下简称GaussDB的基本语法。 关于如何连接数据库&#xff0c;请戳这里。 学习本节课程之后&#xff0c…

【开题报告】基于SpringBoot的消防知识科普平台的设计与实现

1.选题背景 消防知识科普平台的设计与实现是为了提高公众对于消防安全的认知和应对能力&#xff0c;促进社会消防文化的普及和发展。在中国&#xff0c;火灾事故时有发生&#xff0c;造成了重大人员伤亡和财产损失。因此&#xff0c;建立一个基于Spring Boot的消防知识科普平台…

docker---网络

docker的网络模式&#xff1a; 1、桥接模式&#xff1a;创建docker时不需要指定网络类型&#xff0c;默认模式。 2、host模式: 容器将不会虚拟出自己的网卡&#xff0c;也没有自己的ip地址&#xff0c;全部使用宿主机的ip和端口。 3、container模式&#xff1a;容器和容器之间…

第五届计算机能力挑战赛国赛C语言组题解(专科组)

前言&#xff1a;   前两天计算机能力挑战赛国赛结束了&#xff0c;拿着题做了一遍&#xff0c;发现难度真的不大&#xff0c;比省赛简单多了&#xff0c;只是有时候可能有的同学拿着题&#xff0c;没认真仔细去读&#xff0c;或者说紧张了导致自己发挥不好吧。以下是个人的题…

【运维】将Linux的硬盘当内存用,Linux内存不够用的时候如何用硬盘提升内存

文章目录 内存不够用&#xff0c;可以用硬盘当内存吗如何取消这种交换空间交换空间是优先使用的还是说原始内存是会被优先使用的 内存不够用&#xff0c;可以用硬盘当内存吗 是的&#xff0c;可以使用硬盘作为虚拟内存来扩展容器中的内存。这个过程被称为“交换”或“交换空间…

Django 模型操作-分页(七)

一、连接MySql数据库 1、先安装MySQL 2、再安装MySQL驱动 使用mysqlclient pip install mysqlclient 如果上面的命令安装失败, 则尝试使用国内豆瓣源安装: pip install -i https://pypi.douban.com/simple mysqlclient 二、在settings.py中配置 三、 book表的数据…

Android系统启动过程-uBoot+Kernel+Android

摘要&#xff1a;本文是参考大量网上资源在结合自己查看源代码总结出来的&#xff0c;让自己同时也让大家加深对Android系统启动过程有一个更加深入的了解&#xff01;再次强调&#xff0c;本文的大多数功劳应归功于那些原创者们&#xff0c;同时一些必要的参考链接我会一一附上…

1009 说反话

给定一句英语&#xff0c;要求你编写程序&#xff0c;将句中所有单词的顺序颠倒输出。 输入格式&#xff1a; 测试输入包含一个测试用例&#xff0c;在一行内给出总长度不超过 80 的字符串。字符串由若干单词和若干空格组成&#xff0c;其中单词是由英文字母&#xff08;大小…

【机器学习实训项目】黑色星期五画像分析

目录 前言 一、项目概述 1.1 项目简介 1.2 项目背景 1.3 项目目标 二、数据分析 2.1 导入库 2.2 数据基本信息 三、画像分析 3.1 画像1&#xff1a;消费金额Top10 3.2 画像2&#xff1a;高频消费Top10 3.3 画像3&#xff1a;人均消费金额Top10 3.4 画像4&#xff1a;男女消费对…

创投课程第四期 | Web3一级市场投资框架的演变及投资人能力框架的构成

协会邀请了来自Zonff Partners的合伙人——Colin&#xff0c;作为VC创投课程第4期的嘉宾&#xff0c;在北京时间12月9日(周六)下午14:00 PM-15:00 PM于蚂蚁链科技产业创新中心进行线下分享&#xff0c;届时将与所有对Web3投资、创业心怀热忱的朋友们共同探讨《WEB3一级市场投资…

双向链表(数据结构与算法)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

程序启动时访问了未初始化的类指针引发内存访问违例导致程序崩溃的问题排查

目录 1、问题说明 2、使用Windbg动态调试去初步分析 3、使用Windbg详细分析 4、最后 VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更新...&#xff09;https://blog.csdn.net/chenlycly/article/details/124272585C软件异常排查从入门…