项目需求如下:想利用picture-card提供的放大下载和删除功能,并且在上传一张或者多张之后禁止上传(即隐藏后面的加号按钮)
代码如下:
html:
<!--增加on-change和on-remove的钩子,el-upload里面绑定一个占位class:-->
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:class="{hide:hideUpload}"
:on-change="handleChange"
:on-remove="handleRemove">
<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-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="fileRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
js:
export default {
data() {
return {
//初始值:hideUpload: false,
hideUpload: false,
dialogImageUrl: '',
dialogVisible: false,
disabled: false
};
},
methods: {
//onChange 对应的处理函数(添加文件、上传成功和上传失败时都会被调用的那个):
handleChange(file,fileList){
// >=我们想要限制的数量,可以使任意值
this.hideUpload = fileList.length >= 1;
}
//on-remove对应的处理函数(删除文件被调用的那个)
handleRemove(file,fileList) {
console.log(file);
this.hideUpload = fileList.length >= 1;
},
fileRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
},
}
}
css:
<!-- >>>样式穿透,如果使用的是sass、less等预处理器则可以使用/deep/或者::v-deep,建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.-->
<style scoped >
>>> .hide .el-upload--picture-card {
display: none;
}
</style>