vue 点击图片方法

一般项目中需要点击触发事件才进行查看大图,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 = ''
    },

 

posted @   bingxiaoxiao  阅读(38)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示