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

效果图

在这里插入图片描述

原理与源码

我们这里的思路是用ant组件库的upload组件,就是如下这个
在这里插入图片描述
用这个包裹住所有页面,你可以是包裹住App.vue,或者是你的homepage。但是这个涉及到一个问题,就是我们现在确实是可以拖拽导进来文件了,但是同时页面随便一点,也会触发这个导入文件的对话框,而我们并不想触发这个,也就是我们的最终目的,是包裹住整个页面后,只可以拖拽,不可以点击。
但是ant仿佛并没有提供类似click方法,无法重写覆盖,于是这里我们使用了事件冒泡的机制。阻止了上层要素的click事件,于是完美解决。
在这里插入图片描述
改造成我们所需的,就是这样

      <a-upload-draggername="file"action="":showUploadList=false@drop="handleDrop":before-upload="beforeUpload"style="height: 100%;width: 100%;"><!-- 阻止upload组件的click事件 --><div onclick="event.stopPropagation()"><!-- 你的页面 --></div></a-upload-dragger>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/221095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2.两数相加

借文引流&#xff1a;五点钟科技_大道至简系列,机器学习算法系列,学习经验分享-CSDN博客 欢迎大家阅览我的其它专栏。 题目&#xff1a; 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数…

台式扫描电镜与落地式扫描电镜详细对比

随着材料科学和微纳技术的快速发展&#xff0c;扫描电子显微镜已成为研究微观结构的一种重要工具。根据外形体积的不同&#xff0c;扫描电镜可以分为两大类:落地式扫描电镜和台式扫描电镜。本文将从探测器、易操作性、安装环境和价格等多个方面对两者进行比较。 一、发展历史 …

迎接更高效的数据安全合规与风险评估,美创科技DCAS正式商用发布!

数据安全合规与风险评估&#xff0c;是清晰数据安全合规与风险差距&#xff0c;实现可落地数据安全建设和持续改进的关键一环。然而实施起来&#xff0c;你的团队是否面临着这些烦恼&#xff1a; 数据安全合规要求繁多&#xff0c;难以全面掌握&#xff1f; 复杂评估流程带来效…

Java中将List集合数据转成带反斜杠的字符串格式

List<Map<String, Object>> trajectoryTrackList 得到数据&#xff1a;[{latitude32.01813267498781, coord_type_inputwgs84, loc_time1702505122, longitude118.69349822755345}, {latitude32.01816666340177, coord_type_inputwgs84, loc_time1702505255, longi…

Unity | Shader基础知识(第四集:Shader结构体)

目录 一、本节介绍 1 上集回顾 2 本节介绍 二、结构体的需求 1 数据的接入 2 开始写结构体 三、unity封装好的结构体 1 unity封装好了很多结构体 2 如何使用封装好的结构体 四、下集预告 一、本节介绍 1 上集回顾 上一集&#xff0c;我们做了一个可以改变颜色的案例…

如何使用 Flutter 和地理位置 API 构建基于位置的移动应用程序?

基于位置的移动应用程序是当今智能手机用户的新动力。借助这些应用程序&#xff0c;人们可以使用地图来确定正确的路线。跟踪实时位置、搜索附近感兴趣的地点以及使用其他各种基于位置的服务 (LBS)。 如今&#xff0c;对基于位置的应用程序的需求大幅增加。移动应用中地理定位…

Java stream 进阶版

1、Stream 概述 Java 8 引入了 Stream API,它是一种用于简化集合和数组操作的强大工具。Stream API 允许我们将集合或数组视为流,并在流上进行各种操作,如筛选、排序、聚合等。 Stream API 的核心概念是 Stream 流,它代表了一个数据流,其中包含了一系列的元素。这些元素…

js/jquery之input 复选框checkbox、单选按钮radio选中判断

之前总是用&#xff0c;总是遇到坑&#xff0c;解决起来总是需要实践回想。通过这次使用顺便做个简单的总结&#xff0c; 百度了资料&#xff0c;推荐的这个博客很不错&#xff0c;下面只是做了简单的改名字处理&#xff0c;基本是是贴的另一个博客内容。 唯一不一样的是&…

火狐浏览器怎么设置网络代理?代理起到了哪些作用

火狐浏览器是一款流行的网页浏览器&#xff0c;它支持多种网络代理设置。设置网络代理可以帮助用户访问某些网站或提高网络访问速度。但是&#xff0c;使用代理IP时需要注意一些事项&#xff0c;以确保安全和正常使用。 以下是在火狐浏览器中设置网络代理的步骤&#xff1a; 1.…

ubuntu20.04在noetic下编译orbslam2

ubuntu20.04在noetic下编译orbslam2 参考链接1&#xff1a;https://blog.csdn.net/qq_58869016/article/details/128660588 参考链接2&#xff1a;https://blog.csdn.net/dong123456789e/article/details/129693837 在noetic下的安装环境 1.库安装 sudo apt-get update sudo …

UDP特性之广播

UDP特性之广播 1. 广播的特点2. 设置广播属性3. 广播通信流程4. 通信代码总结 1. 广播的特点 广播的UDP的特性之一&#xff0c;通过广播可以向子网中多台计算机发送消息&#xff0c;并且子网中所有的计算机都可以接收到发送方发送的消息&#xff0c;每个广播消息都包含一个特殊…

《Linux从练气到飞升》No.28 Linux中的线程同步

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…

陪玩系统圈子系统:打破孤单,寻找游戏共伴!APP小程序H5三端源码交付,支持二开!喜欢软件开发的朋友可以一起交流!

在如今快节奏的生活中&#xff0c;游戏作为一种娱乐方式&#xff0c;早已融入了人们的生活&#xff0c;成为许多人放松心情、释放压力的方式之一。然而&#xff0c;与此同时&#xff0c;游戏中的孤独感也成为一些玩家所面临的问题。为了解决这个问题&#xff0c;陪玩系统圈子系…

ELK之Logstash解析json报错 JSON parse error:Unrecognized character escape ‘x‘

一、报错分析 原始报错信息&#xff1a; JSON parse error, original data now in message field {:message>"Unrecognized character escape x (code 120)\n at [Source: (String)\"{\"timestamp\":\"2022-06-29T10:02:0008:00\",\"s…

数据结构-矩阵

介绍 数据结构中的矩阵主要涉及以下几种&#xff1a; 对称矩阵&#xff1a;若矩阵A n*n中的元素特点是a[ij]a[ji]&#xff0c;则称之为n阶对称矩阵。对称矩阵的每一对元素占用一个存储单元&#xff0c;那么对于n阶矩阵&#xff0c;可以压缩到n(n1)/2个元素的存储单元。对角矩阵…

C++初阶:STL之vector类模板

目录 一.vector的介绍及使用 1.1.vector的介绍 1.2.vector的使用 1.2.1.vector的定义 1.2.2.vector iterator的使用 1.2.3.vector的空间增长问题 1.2.4.vector的增删查改 1.3.vector在OJ中的使用 题一&#xff1a;只出现一次的数字 题二&#xff1a;杨辉三角 题三&a…

【vue3】处理数组方法,在数组中获取指定条件所在的数组对象等持续更新笔记~~

1、在数组中获取指定条件所在的数组对象 &#xff08;1&#xff09;filter方法获取到的是包含指定项的数组 data.checkRow res.result.filter(item > item.checked 1);打印&#xff1a; &#xff08;2&#xff09;map方法取到的是包含指定项的数组&#xff0c;如果满足…

使用splice修改数组数据 数据被修改了 但是页面视图不更新

场景 <el-tagv-for"(tag, index) in arr":key"tag":closable"true"close"onClose(index, $event)" >{{ tag }} </el-tag>// 标签关闭时触发onClose(index, e) {console.log("标签关闭", index);this.arr.splic…

解决PP材质粘合问题用PP专用UV胶水

PP材料已经广泛应用于各行各业&#xff0c;在粘接中会有不同的问题需求&#xff0c;那么使用专用于PP的UV胶水可能是解决PP材质粘合问题的一种有效方法。 主要在于&#xff1a;UV胶水在紫外线照射下可以快速固化&#xff0c;形成坚固的连接。所以使用PP专用UV胶水时可以考虑&am…

基于亚马逊云科技新功能:Amazon SageMaker Canvas无代码机器学习—以构建货物的交付状态检测模型实战为例深度剖析以突显其特性

授权说明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在亚马逊云科技开发者社区、 知乎、自媒体平台、第三方开发者媒体等亚马逊云科技官方渠道。 目录 &#x1f680;一. Amazon SageMaker &#x1f50e;1.1 新功能发布&#xff1a;A…