最近在写一个项目,基于vue的el-element工具编写,其中需要上传图片,因为只需上传一张,所以就想限制一下上传照片数量,el-upload组件的确有自带的属性(限制上传照片数量),但是上传的+号还在,个人感觉效果不好,所以就有了以下代码,上传一张照片之后隐藏,执行删除,+重新出现,
原本想加上效果图,但是视频仅支持上传过的,截图动图我嫌麻烦,所以就省略了效果图步骤 废话不多说,直接上代码
<template>
<!--el-upload里面绑定一个占位class:设置隐藏-->
<div class="hello">
<el-upload
ref="pictureUpload"
action="#"
list-type="picture-card"
:auto-upload="false"
:class="{ hide: hideUpload }"
:on-change="handleChange"
>
<i slot="default" class="el-icon-plus" />
<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" />
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="fileRemove(file)"
>
<i class="el-icon-delete" />
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
name: 'Example',
data() {
return {
// 初始值:hideUpload: false,
hideUpload: false,
dialogImageUrl: '',
dialogVisible: false,
disabled: false
}
},
methods: {
// onChange 对应的处理函数
handleChange(file, fileList) {
this.hideUpload = true
},
fileRemove(file) {
this.$refs.pictureUpload.uploadFiles = []
this.hideUpload = false
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
}
}
</script>
<style scoped >
.hello >>> .hide .el-upload--picture-card {
display: none;
}
</style>