图片点击放大

         在列表中添加插槽  <template slot-scope="scope">,获取当前点击的数据

        在图片中添加点击事件的方法,用来弹出窗口

  <vxe-column
         field="icon"
         title="等级图标">
           <template slot-scope="scope">
              <el-image
                   style="width: 30px; height: 30px"
                   :src="scope.row.icon"
                    @click="imgDialog(scope.row.icon)"
               ></el-image>
           </template>
</vxe-column>

        dialog放在列表的外面,保证窗口弹出不被阻挡 

        :visible.sync 用来绑定是否显示窗口,false表示不显示

        在dialog中放入需要显示的内容


    <el-dialog title :visible.sync="imgDialogIsShow" width="300px" :modal="false">
                    <el-image
                            style="width: 100%; height: 100%"
                            :src="imgSrc"
                    ></el-image>
    </el-dialog>
                imgDialogIsShow: false, // 默认不显示弹框
                imgSrc: "" // 图片路径

        通过插槽获取到数据,赋值给imgSrc对象,并将imgDialogIsShow修改为true,弹出窗口。  

 //dialog_显示
            imgDialog(icon) {
                this.imgDialogIsShow = true;
                this.imgSrc = icon;
},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Kubernetes(K8s) Pod详解-05

Pod详解 Pod介绍 Pod结构 每个Pod中都可以包含一个或者多个容器&#xff0c;这些容器可以分为两类&#xff1a; 用户程序所在的容器&#xff0c;数量可多可少 Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个&#xff1a; 可以以它为依据…

hadoop完全分布式搭建

文章目录 集群部署规划服务器准备Mobaxterm 远程登录实验前准备安装软件工具关闭防火墙 安装 JDK 和 Hadoop创建软件包目录解压软件包配置环境变量 集群搭建先创建 HDFS 工作目录和 LOG 目录配置集群配置环境配置 HDFS 主节点信息、持久化和数据文件的主目录配置 HDFS 默认的数…

程序员养生之道:延寿不忘初心——延寿必备

文章目录 每日一句正能量前言如何养生饮食篇运动篇休息篇后记 每日一句正能量 现代社会已不是大鱼吃小鱼的年代&#xff0c;而是快鱼吃慢鱼的年代。 前言 在IT行业中&#xff0c;程序员是一个重要的职业群体。由于长时间的繁重编程工作&#xff0c;程序员们常常忽略了身体健康…

Unity中Shader编译目标渲染器

文章目录 前言一、Unity在打包时&#xff0c;会把Shader编译成不同平台对应的代码我们在状态栏&#xff0c;可以看见我们目前所处于的目标平台 二、在Unity中&#xff0c;怎么指定目标平台1、#pragma only_renderers2、#pragma exclude_renderers 三、我们测试一下看看效果1、 …

postman利用pre-request script自动设置token

场景&#xff1a; 我们请求接口&#xff1a;/api/rest/user/list获取用户列表&#xff0c;但是该接口需要在header中带上Authorization表示的鉴权Token才行。 而登录接口/api/rest/login&#xff0c;则可以返回改Token 常规方案 我们先调登录接口/api/rest/login获取到Toke…

极简云网络验证系统开源源码

极简云验证&#xff0c;多样化应用管理方式&#xff0c;多种项目任你开发&#xff0c;分布式应用开关&#xff0c;让您的应用开发更简单&#xff0c;完美实现多用户多应用管理。 支持多应用卡密生成&#xff1a; 卡密生成 单码卡密 次数卡密 会员卡密 积分卡密 卡密管理 卡密长…

了解http协议

http的相关概念 互联网&#xff1a;是网络的网络&#xff0c;是所有类型网络的母集 因特网&#xff1a;世界上最大的互联网网络。即因特网概念从属于互联网概念。习惯上&#xff0c;大家把连接在因特网上的计算机都成为主机。 万维网&#xff1a;数据库 URL&#xff1a;万维…

亚马逊云科技向量数据库与生成式AI的完美融合:落地实践详解(四)

以往 OpenSearch 摄入时的一些最佳实践中并不包含 knn 的情况&#xff0c;所以在 knn 索引存在的情况&#xff0c;不能完全参照之前的结论&#xff0c;通过以上三种不同的实验方式&#xff0c;在多次实验的过程中&#xff0c;本文得到了以下的一些实践经验和结论&#xff0c;供…

自研分布式IM-HubuIM RFC草案

HubuIM RFC草案 消息协议设计 基本协议 评估标准 【性能】协议传输效率&#xff0c;尽可能降低端到端的延迟&#xff0c;延迟高于200ms用户侧就会有所感知 【兼容】既要向前兼容也要向后兼容 【存储】减少消息包的大小&#xff0c;降低空间占用率&#xff0c;一个字节在亿…

一键添加特效与色彩变化,视频剪辑高手助力创作炫酷短片!

亲爱的视频创作者们&#xff0c;想要让你的视频更加炫酷、吸引眼球吗&#xff1f;现在&#xff0c;我们有一款神奇的工具&#xff0c;可以帮助你一键添加特效与色彩变化&#xff0c;让你的视频瞬间焕发新活力&#xff01; 首先第一步&#xff0c;我们要进入视频剪辑高手并在上…

关于Unity中字典在Inspector的显示

字典在Inspector的显示 方法一&#xff1a;实现ISerializationCallbackReceiver接口 《unity3D游戏开发第二版》记录 在编辑面板中可以利用序列化监听接口特性对字典进行序列化。 主要继承ISerializationCallbackReceiver接口 实现OnAfterDeserialize() OnBeforeSerialize() …

「实用场景教程」如何用日程控件DHTMLX Scheduler制作酒店预订日历?(三)

dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件&#xff0c;日历事件通过Ajax动态加载&#xff0c;支持通过拖放功能调整事件日期和时间&#xff0c;事件可以按天&#xff0c;周&#xff0c;月三个种视图显示。 DHTMLX Scheduler正式版下载 在本教程中&…

Mac 安装 Django 并连接 MySQL

一、下载安装运行Django看官方教程就好了&#xff0c;网址&#xff1a;Django 安装_w3cschool 二、连接MySQL&#xff08;我用的是pymysql和mysqlclient&#xff09;&#xff1a; 1、创建好项目后找到这个文件 2、修改当中的连接信息&#xff0c;将这些信息改成你自己的就好了…

(三)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、Tiki-taka算法&#xff08;TTA&#xf…

ruoyi+Hadoop+hbase实现大数据存储查询

前言 有个现实的需求&#xff0c;数据量可能在100亿条左右。现有的数据库是SQL Server&#xff0c;随着采集的数据不断的填充&#xff0c;查询的效率越来越慢&#xff08;现有的SQL Server查询已经需要数十秒钟的时间&#xff09;&#xff0c;看看有没有优化的方案。 考虑过S…

vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

一、实现效果 使用echarts实现省市地图绘制根据数据在地图显示柱状图根据数据显示数据&#xff0c;涟漪效果 二、实现方法 1、安装echarts插件 npm install echarts --save2、获取省市json数据 https://datav.aliyun.com/portal/school/atlas/area_selector 通过 阿里旗下…

(2)(2.2) Lightware SF45/B(350度)

文章目录 前言 1 安装SF45/B 2 连接自动驾驶仪 3 通过地面站进行配置 4 参数说明 前言 Lightware SF45/B 激光雷达(Lightware SF45/B lidar)是一种小型扫描激光雷达&#xff08;重约 50g&#xff09;&#xff0c;扫描度可达 350 度&#xff0c;扫描范围 50m。 1 安装SF45…

老技术告诉你如何选择代理IP以满足数据采集需求

根据IDC发布的大数据行业最新报道显示&#xff0c;目前已经有越来越多的企业将重点放在大数据技术之上&#xff0c;以大数据来进行创新工业互联网的建设&#xff0c;携手央国企共同推进新型工业化。由此可见大数据的重要性。不过具体到每一位技术人员来说&#xff0c;在进行数据…

[读论文][跑代码]BK-SDM: A Lightweight, Fast, and Cheap Version of Stable Diffusion

github: GitHub - Nota-NetsPresso/BK-SDM: A Compressed Stable Diffusion for Efficient Text-to-Image Generation [ICCV23 Demo] [ICML23 Workshop] ICML 2023 Workshop on ES-FoMo 简化方式 蒸馏方式&#xff08;训练Task蒸馏outKD-FeatKD&#xff09; 训练数据集 评测指标…

【赠书第10期】从概念到现实:ChatGPT和Midjourney的设计之旅

文章目录 前言 1 ChatGPT的崛起 2 Midjourney的探索 3 技术创新的交汇 4 对未来的影响 5 结论 6 推荐图书 7 粉丝福利 前言 在过去的几年里&#xff0c;自然语言处理和聊天模型的领域取得了飞速的发展。ChatGPT 作为一个由OpenAI 开发的大型语言模型&#xff0c;以其强…