1.上传框隐藏效果图(限制上传两张图片,上传两张图片后隐藏上传框)
<template>
<div>
<el-form>
<el-upload
ref="uploadPicture"
action="#"
list-type="picture-card"
:class="{hide:hideVisible}"
:on-change="handleChange"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</el-form>
</div>
</template>
<script>
export default {
data(){
return{
hideVisible: false,
}
},
methods: {
handleChange(file, fileList) {
this.hideVisible = fileList.length >= 2; //限制上传两张图片,上传两张图片后隐藏上传框
},
handleRemove(file) {
this.hideVisible= false
this.$refs.uploadPicture.handleRemove(file)
},
}
}
</script>
<style>
>>> .hide .el-upload--picture-card {
display: none;
}
</style>
标签:el,upload,两张,隐藏,file,上传,hideVisible,图片
From: https://blog.csdn.net/qq_57923118/article/details/141360867