elementUi upload上传达到limit后隐藏upload图标-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementUi upload上传达到limit后隐藏upload图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如题所述，我们项目要求上传控件最大只允许上传3张。当数量达到的时候，自动隐藏上传按钮控件。而当点击删除之前的照片后，又重新显示上传按钮控件。

这里我们选用了饿了么的elementUi里的el-upload控件作为基础，再添加我们的需求。

主要的templete如下

<el-upload
          ref="uploadRef"
          action="fakeaction"
          :http-request="uploadFile"
          :class="attachmentArray.length >= 3 ? 'hide' : 'show'"
          list-type="picture-card"
          :before-upload="beforeAttachmentUpload"
          :auto-upload="true"
          :limit="limit"
          :on-exceed="handleExceed"
          accept=".jpg,.png,.jpeg"
          >
            <div slot="file" class="upload-item" slot-scope="{file}">
                <div class="upload-img-wrapper">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" @click="handlePictureCardPreview(file)">
                </div>
                <i @click="handleRemove(file)" class="delete-icon"></i>
            </div>
        </el-upload>

而对应的style如下

.hide   {
  position: relative;
  float: left;
  padding-top: 20px;
  padding-left: 23px;
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }

    .el-upload-list__item {
      border: 0;
      border-radius: 0;
      margin:0 30px 0 0;
    }
  }
}

但是光这样子设置呢，会有些许瑕疵，因为控件本身有删除动画时长，进而使得先出现了第四个按钮，再等删除动画完成后，重新显示了三个控件。

所以，我们就必须在删除操作里，给个响应时长。

 handleRemove(file) {
      // console.log(file);
      const index = this.$refs.uploadRef.uploadFiles.findIndex(e => e.uid === file.uid);
      this.$refs.uploadRef.uploadFiles.splice(index, 1);
      setTimeout(() => {
        this.attachmentArray.splice(index,1);
      }, 1000);
      // console.log(this.attachmentArray,"attachmentArray");
    },

这样子才能完美显示/隐藏按钮。文章来源地址https://www.toymoban.com/news/detail-563472.html

到了这里，关于elementUi upload上传达到limit后隐藏upload图标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！