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>
相关推荐
墨渊君1 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu2 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z2 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行2 小时前
Android 15边到边模式
前端
源猿人2 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾2 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工2 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
RoyLin2 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
xw52 小时前
uni-app中v-if使用”异常”
前端·uni-app