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 = '' },
分类:
VUE
, element ui
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix