附件上传组件封装

移动端开发时有个文件上传的功能,觉得找插件再覆盖他的样式也挺麻烦的,就自己造个轮子吧,效果如下:

自定义样式代码如下:主要思路就是  自定义上传样式 覆盖原有的默认样式,自己加一个上传的文件列表样式

css样式如下:

<style scoped>
.upTopbox{
  font-size: 0.28rem;
  position: relative;
}
.upAddBox{
  width:0.4rem;
  height:0.4rem;
  border: 1px solid #DCDCDC;
  text-align: center;
  line-height: 0.4rem;
  position: absolute;
  right: 0.08rem;
}
  .fileInp{
    width:0.4rem;
    height:0.4rem;
    opacity: 0;
    position: absolute;
    right: 0.08rem;
  }
  .upFilesBox{
    background: #edf5fd;
    margin-top: 0.2rem;
    padding:0.04rem 0
  }
  .upFileImg{
    width: 0.7rem;
    height: 0.7rem;
  }
  .upFileText{
    line-height: 0.35rem;
  }
  .delUpFile{
    width: 0.4rem;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.4rem;
    text-align: center;
    margin-top: 0.15rem;
    transform: rotate(45deg);
  }
</style>

每次上传已经删除后,都把变化提交给父组件

 

posted @ 2019-08-28 17:10  小小的忧愁  阅读(671)  评论(0编辑  收藏  举报