vue整个页面可以拖拽导入文件

效果图

原理与源码

我们这里的思路是用ant组件库的upload组件,就是如下这个

用这个包裹住所有页面,你可以是包裹住App.vue,或者是你的homepage。但是这个涉及到一个问题,就是我们现在确实是可以拖拽导进来文件了,但是同时页面随便一点,也会触发这个导入文件的对话框,而我们并不想触发这个,也就是我们的最终目的,是包裹住整个页面后,只可以拖拽,不可以点击。

但是ant仿佛并没有提供类似click方法,无法重写覆盖,于是这里我们使用了事件冒泡的机制。阻止了上层要素的click事件,于是完美解决。

改造成我们所需的,就是这样

javascript 复制代码
      <a-upload-dragger
          name="file"
          action=""
          :showUploadList=false
          @drop="handleDrop"
          :before-upload="beforeUpload"
          style="height: 100%;width: 100%;"
      >
        <!-- 阻止upload组件的click事件 -->
        <div onclick="event.stopPropagation()">
        	<!-- 你的页面 -->
         </div>
      </a-upload-dragger>
相关推荐
冰镇生鲜3 分钟前
《元素视口可见性检测 》Vue自定义指令 封装
前端·vue.js
qirong4 分钟前
夜色渐浓,众星拱月 - Threejs复刻原神绝美空月之歌场景(二)
前端·javascript·three.js
华科云商xiao徐6 分钟前
C#编写HttpClient爬虫程序示例
前端
卖报的小行家_7 分钟前
Vue2源码,响应式原理,数组
前端
蓉妹妹7 分钟前
AntDesign下,Select内嵌Menu标签,做一个多选下拉框,既可以搜索,还可以选择下拉项
前端·react.js
牛马喜喜7 分钟前
如何从零实现一个todo list(3)
前端
hepherd10 分钟前
Vue学习笔记 - 安装与环境搭建
前端·vue.js
前端飞天猪10 分钟前
学习笔记:从输入URL到页面呈现的全流程深度解析
前端·浏览器
想想拼搏11 分钟前
高德地图配合three.js加载3d模型
前端
牛马喜喜12 分钟前
如何从零实现一个todo list(4)
前端