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