基于vue2.x实现文件上传（w-upload）组件

最新推荐文章于 2024-08-14 15:51:24 发布

Eden-one

最新推荐文章于 2024-08-14 15:51:24 发布

阅读量4.4k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/SHINE_SUNNY1/article/details/80558487

版权

本文介绍如何基于Vue2.x实现文件上传组件w-upload，通过修改样式和利用CSS实现上传按钮的定制。内容包括实现思路、实现过程、组件逻辑及父组件的交互。同时提供在线演示地址和Attributes详细说明。

摘要由CSDN通过智能技术生成

在线演示地址w-upload

在这一系列的博客里，有一些其他的组件实现过程，有兴趣的童鞋可以了解一下，今天我们来介绍一下w-upload文件上传组件的实现原理。

实现思路

刚开始写这个的时候我自己也感觉很懵逼，感觉这个原生上传文件的样式咋改，很烦，最后在github上大佬们的实现过程，顿时就感觉这个东西真的很假，就只是让样式变得好看而已，不多说了。来说一下这个的实现过程。
其实原生的上传文件的表单是这样的,我们怎样修改其样式呢，其实是不好改的，既然修改不了，我们就用一个比较特别的方法，这时候就可以凸显出css的强大了，我们通过让input上传文件通过opacity设置为0，然后给其设置为绝对定位，使其脱离文档流，覆盖在我们预期的样式上，这样我们每次点击的是input框,而不是我们预期的button按钮，这样就可以正常触发事件了。

实现过程

子组件以及样式

<div class="upload-block">
    <div class="uploadBtn">
      <w-button v-if="disable" type="primary" class="disable-btn">
        <span>File</span>
        <i class="w-icon-ascend"></i>
      </w-button>
      <w-button v-else