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>

如有雷同纯属巧合,如有不足,请多指教。

Logo

前往低代码交流专区

更多推荐