当前位置: 首页 > article >正文

图片点击放大

        在列表中添加插槽  <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;
},


http://www.kler.cn/news/159609.html

相关文章:

  • go基础语法10问(2)
  • WPF Live Charts2 自学笔记
  • 20、pytest中的参数化
  • 213. 打家劫舍 II --力扣 --JAVA
  • 华为云obs在java中的使用
  • 应用层自定义协议
  • Jmeter测试移动接口性能 —— 压测
  • MySQL性能调优-2-实际优化案例
  • Redis高效缓存:加速应用性能的利器
  • 反序列化漏洞详解(二)
  • 【MySQL环境配置在虚拟机中】
  • 力扣面试经典150题——Unix简化路径
  • SQL通配符字符
  • 有什么样的管理模式可以改善团队关系
  • [Realtek sdk-3.4.14b] RTL8197FH-VG+RTL8812FR WiFi黑名单及剔除已连接终端功能实现
  • 02、pytest环境准备
  • MUC\GD32低功耗模式简介
  • CSP-矩阵运算
  • Elasticsearch:什么是向量嵌入?
  • 【Scopus检索】第六届生物技术与生物医学国际学术会议(ICBB 2024)
  • 使用docker搭建『Gitea』私有仓库
  • Objaverse:大规模3D模型开放数据集
  • git基础
  • unsafe类和varhandle类讲解
  • 查询服务器CPU、内存、磁盘、网络IO、队列、数据库占用空间等等信息
  • 1 NLP分类之:FastText
  • 同旺科技 USB TO RS-485 定制款适配器--- 拆解(二)
  • 如何基于OpenCV和Sklearn库开展数据降维
  • 力扣11.盛最多水的容器
  • lxml 总结