首页 > 其他分享 >vue 点击图片方法

vue 点击图片方法

时间:2024-07-10 10:13:06浏览次数:8  
标签:clickHandler 触发 vue console log refs 点击 图片

一般项目中需要点击触发事件才进行查看大图,elementUi组件库中并没有写触发需要执行的代码,这里在触发的方法中加this.$refs.preview.clickHandler()触发查看大图功能

<el-upload
                class="avatar-uploader" accept=".jpg,.jpeg,.png" name="image" :action="uploadImageUrl" :show-file-list="false"
                :on-change="imageUpload" :headers="headers" :before-upload="imageCheck">
                <el-image
                  v-if="form.applicationIconUrl"
                  ref="preview"
                  style="width: 80px; height: 80px"
                  :src="form.applicationIconUrl"
                  :preview-src-list="[form.applicationIconUrl]"
                >
                </el-image> 
                <i v-else class="el-icon-plus" style="font-size: 18px; line-height: 80px"></i>
                <div @click.stop class="position-index" v-if="form.applicationIconUrl">
                  <i @click.stop.prevent="lookImg" class="icon iconfont icon-xiangxia"></i>
                  <i @click.stop.prevent="deleteImg" class="icon iconfont icon-shanchu"></i>
                </div>
              </el-upload>
 lookImg() {
      console.log(1)
      this.$refs.preview.clickHandler()
    },
    deleteImg() {
      console.log(2)
      this.form.applicationIconUrl = ''
    },

 

标签:clickHandler,触发,vue,console,log,refs,点击,图片
From: https://www.cnblogs.com/xiaoxiao2017/p/18293284

相关文章

  • 基于java+springboot+vue实现的音乐网站(文末源码+Lw)102
     功能介绍:本音乐网站管理员功能有个人中心,用户管理,歌曲分类管理,歌曲信息管理,管理员管理,系统管理等。用户可以注册登录,试听歌曲,可以下载歌曲。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、......
  • 基于java+springboot+vue实现的校园社团管理平台(文末源码+Lw)101
     本校园社团信息管理系统功能有个人中心,学生管理,社长管理,社团分类管理,社团信息管理,加入社团管理,社团成员管理,社团活动管理,活动报名管理,系统管理等。社长添加社团,管理员审核社团,学生加入社团,社长审核社团。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MY......
  • 基于springboot+vue实现的大型商场应急预案管理系统(文末源码+Lw)099
    本大型商场应急预案管理系统管理员功能有个人中心,员工管理,预案信息管理,预案类型管理,事件类型管理,预案类型统计管理,事件类型统计管理,应急预案管理。员工可以查看各种预案信息。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MYSQL数据库设计开发,充分保证系......
  • 基于java+springboot+vue实现的音乐网站(文末源码+Lw)102
     功能介绍:本音乐网站管理员功能有个人中心,用户管理,歌曲分类管理,歌曲信息管理,管理员管理,系统管理等。用户可以注册登录,试听歌曲,可以下载歌曲。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、......
  • 基于java+springboot+vue实现的校园社团管理平台(文末源码+Lw)101
     本校园社团信息管理系统功能有个人中心,学生管理,社长管理,社团分类管理,社团信息管理,加入社团管理,社团成员管理,社团活动管理,活动报名管理,系统管理等。社长添加社团,管理员审核社团,学生加入社团,社长审核社团。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MY......
  • 基于springboot+vue实现的大型商场应急预案管理系统(文末源码+Lw)099
    本大型商场应急预案管理系统管理员功能有个人中心,员工管理,预案信息管理,预案类型管理,事件类型管理,预案类型统计管理,事件类型统计管理,应急预案管理。员工可以查看各种预案信息。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MYSQL数据库设计开发,充分保证系......
  • 最近很火的Vue Vine是如何实现一个文件中写多个组件
    前言在今年的VueConf2024大会上,沈青川大佬(维护Vue/Vite中文文档)在会上介绍了他的新项目VueVine。VueVine提供了全新Vue组件书写方式,主要的卖点是可以在一个文件里面写多个vue组件。相信你最近应该看到了不少介绍VueVine的文章,这篇文章我们另辟蹊径来讲讲VueVine是如何实现......
  • react或vue中页面多个echarts,只有最后一个能自适应的处理方法
    页面多个echarts时,自适应绑定方式必须是addEventListenerwindow.addEventListener("resize",()=>{myChart.resize();myChart2.resize();})myChart,myChart2是echart实例   ......
  • element-plus el-table点击当前行和划过展示鼠标
    在ElementPlus的el-table组件中,设置滑过行时鼠标的样式可以通过CSS来实现。你可以使用CSS的cursor属性来定义鼠标悬停时的样式。以下是一个简单的例子:首先,在你的Vue组件的.el-table.el-table__row:hover{cursor:pointer;/*这里可以更改为其他的光标......
  • 【vueUse库Reactivity模块各函数简介及使用方法--上篇】
    vueUse库是一个专门为Vue打造的工具库,提供了丰富的功能,包括监听页面元素的各种行为以及调用浏览器提供的各种能力等。其中的Browser模块包含了一些实用的函数,以下是这些函数的简介和使用方法:vueUse库Sensors模块各函数简介及使用方法vueUseReactivity函数1.com......