vue2组件封装+elementUI

1.VUE2图片上传封装

使用

封装代码

  
    = this.limit}"
    >
      
    

    
    
      请上传
       大小不超过 {{ fileSize }}MB 
       格式为 {{ fileType.join("/") }} 
      的文件
    

    
      
    
  




// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {
    display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
    transition: all 0s;
}

::v-deep .el-list-enter, .el-list-leave-active {
  opacity: 0;
  transform: translateY(0);
}

2.文件上传封装

使用

封装代码

  
    
      
      选取文件
      
      
        请上传
        
          大小不超过 {{ fileSize }}MB
        
        
          格式为 {{ fileType.join("/") }}
        
        的文件
      
    

    
    
      

        
           {{ getFileName(file.name) }} 
        
        
          删除
        
      
    
  





.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}

3.图片回显

使用

封装代码

  
    
    
      
    
  
  






.el-image {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;
  ::v-deep .el-image__inner {
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      transform: scale(1.2);
    }
  }
  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}

4.文件回显

使用

5.树形封装

使用

组件封装代码