VUE Element-UI el-upload 照片墙 到达limit最大值之后 关闭上传按钮
VUE Element-UI el-upload 照片墙 到达limit最大值之后 关闭上传按钮这个官方没有具体的方法,我们来改造下。逻辑是这样,我们根据官方的api,每次上传和删除都有回调函数,上传后回调参数(response, file, fileList),删除后回调参数(file, fileList),我们根据参数fileList的长度来判断,然后决定上传按钮是否显示。具体实现:1...
·
VUE Element-UI el-upload 照片墙 到达limit最大值之后 关闭上传按钮
这个官方没有具体的方法,我们来改造下。
逻辑是这样,我们根据官方的api,每次上传和删除都有回调函数,上传后回调参数(response, file, fileList),删除后回调参数(file, fileList),我们根据参数fileList的长度来判断,然后决定上传按钮是否显示。
具体实现:
1、先找到框架上传按钮的类名 .el-upload–picture-card
2、我们给组件el-upload动态绑定一个class( :class="{hide:showUpload}" )
3、data中初始化showUpload值,初始 false
4、根据每次上传或者删除的回调参数fileList的长度,判断showUpload的ture或false。从达到是否显示上传按钮的目的。
详细代码如下:
<template>
<div class="hello">
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:limit="2"
:on-success="handleSuccess"
:on-remove="handleRemove"
:class="{hide:showUpload}">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
showUpload:false
}
},
methods:{
handleRemove(file, fileList) {
if(fileList.length < 2){
this.showUpload = false
}
},
handleSuccess(response, file, fileList) {
if(fileList.length >= 2){
this.showUpload = true
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello >>> .hide .el-upload--picture-card {
display: none;
}
</style>
如有雷同纯属巧合,如有不足,请多指教。
更多推荐
所有评论(0)