vue element-ui 隐藏上传按钮

1、template:

<div style="text-align: initial;margin-top: 20px;">
  <el-upload
      :class="{hide:hideUpload}"
      action= ''
      list-type="picture-card"
      :auto-upload="false"
      :show-file-list='true'
      :file-list="certificates"
      :on-preview="showimg"
      :on-change="handlePictureCardPreview"
      :limit="3"
      accept=".jpg,.jpeg,.png,.JPG,.JPEG"
      :on-exceed="handleExceed"
      :on-remove="handleRemove">
      <i class="el-icon-plus" ></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="showimgs" alt="">
  </el-dialog>
 </div>

2、export default:

certificate: [],
certificates: [],
showimgs: '', dialogVisible: false, hideUpload: false, limitCount: 3,

3、methods:

//放大显示图片
showimg(file) {   this.showimgs = file.url   this.dialogVisible = true },
//限制图片弹窗 handleExceed(files, fileList) {   this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); },
//移除图片 handleRemove(file, fileList) {   var that = this   that.certificate = []   fileList.forEach((item, index) => {     that.certificate.push(item.url);   });
  //当图片大于或等于3张,   this.hideUpload = fileList.length >= this.limitCount; },
//选择图片 handlePictureCardPreview(file, fileList) {   var that = this   fileList.forEach((item, index) => {     if (item.raw) {       var reader = new FileReader()       reader.readAsDataURL(item.raw)       reader.onload = function () {         that.certificate.push(reader.result)       }     }   });   console.log(fileList.length);   if(fileList.length == 3) {     this.showBtnImg = false;     this.noneBtnImg = true;   }   this.hideUpload = fileList.length >= this.limitCount; },

4、style:

.hide .el-upload--picture-card{
   display: none !important;   /* 上传按钮隐藏 */
}

需要注意的是,style 必须把 scope 移除掉,隐藏上传按钮才会生效!

原文地址:https://www.cnblogs.com/moguzi12345/p/13749498.html