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 @ 2024-07-10 09:53  bingxiaoxiao  阅读(2)  评论(0编辑  收藏  举报