当前位置: 首页 > 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/a/159609.html

相关文章:

  • MFC工控项目实例三十实现一个简单的流程
  • Mysql每日一题(行程与用户,困难※)
  • Java:解决因为大小写不规范导致的接收不到数据
  • 【力扣热题100】[Java版] 刷题笔记-169. 多数元素
  • 时序论文20|ICLR20 可解释时间序列预测N-BEATS
  • 多进程/线程并发服务器
  • 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)