display 隐藏上传按钮_vue element-ui 隐藏上传按钮

1、template：

: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">

　　　　

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 移除掉，隐藏上传按钮才会生效！