基于Vue3文件拖拽上传功能实现
更新时间:2022年10月27日 11:01:11 作者:明知山_
这篇文章主要介绍了Vue3文件拖拽上传功能,支持拖拽到此区域上传,支持选择多个文件/文件夹,代码很简单,对vue3拖拽上传功能感兴趣的朋友一起看看吧
文件上成功能在我们的身边经常遇到,下面小编通过实例代码给大家分享实现方法,效果图如下所示:
<template> <div :class="['drag', { 'drag-active': active }]" ref="drag"> <p class="drag-title">未选择文件/文件夹</p> <p class="drag-subtile"> 支持拖拽到此区域上传,支持选择多个文件/文件夹 <br /> 单个文件夹最大支持512GB </p> </div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue' const drag = ref(null) const active = ref(false) onMounted(() => { drag.value.addEventListener('drop', handleDrop) drag.value.addEventListener('dragleave', (e) => { active.value = false e.preventDefault() }) drag.value.addEventListener('dragenter', (e) => { active.value = true e.preventDefault() }) drag.value.addEventListener('dragover', (e) => { active.value = true e.preventDefault() }) }) onBeforeUnmount(() => { drag.value.removeEventListener('drop', handleDrop) }) const emit = defineEmits(["file"]) const handleDrop = (e) => { e.preventDefault() active.value = false emit("file", Array.from(e.dataTransfer.files)) } </script> <style lang="scss" scoped> .drag { height: 220px; border: 1px dashed #DEDEDE; border-radius: 4px; display: flex; align-items: center; flex-direction: column; justify-content: center; &-active { border: 1px dashed #2260FF; } &-title { font-size: 14px; } &-subtile { font-size: 12px; color: #999999; margin-top: 30px; text-align: center; line-height: unset; } } </style>
到此这篇关于基于Vue3文件拖拽上传功能实现的文章就介绍到这了,更多相关vue3拖拽上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章
vue+Ant Design进度条滑块与input联动效果实现
最近接到这样一个需求滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100,怎么实现这个联动效果呢,下面小编给大家分享下基于vue+Ant Design进度条滑块与input联动效果的实现,感兴趣的朋友跟随小编一起看看吧2022-12-12解决vue中数据更新视图不更新问题this.$set()方法
这篇文章主要介绍了解决vue中数据更新视图不更新问题this.$set()方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-06-06vue/cli3.0脚手架部署到nginx时页面空白的问题及解决
这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论