基于Vue3文件拖拽上傳功能實現(xiàn)
更新時間:2022年10月27日 11:01:11 作者:明知山_
這篇文章主要介紹了Vue3文件拖拽上傳功能,支持拖拽到此區(qū)域上傳,支持選擇多個文件/文件夾,代碼很簡單,對vue3拖拽上傳功能感興趣的朋友一起看看吧
文件上成功能在我們的身邊經(jīng)常遇到,下面小編通過實例代碼給大家分享實現(xiàn)方法,效果圖如下所示:
<template> <div :class="['drag', { 'drag-active': active }]" ref="drag"> <p class="drag-title">未選擇文件/文件夾</p> <p class="drag-subtile"> 支持拖拽到此區(qū)域上傳,支持選擇多個文件/文件夾 <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>
到此這篇關(guān)于基于Vue3文件拖拽上傳功能實現(xiàn)的文章就介紹到這了,更多相關(guān)vue3拖拽上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關(guān)文章
vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D
這篇文章主要介紹了vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10使用vue官方提供的模板vue-cli搭建一個helloWorld案例分析
這篇文章主要介紹了用vue官方提供的模板vue-cli搭建一個helloWorld案例,需要的朋友可以參考下2018-01-01深入理解vue.js中$watch的oldvalue與newValue
這篇文章主要給大家介紹了關(guān)于vue.js中$watch的oldvalue與newValue的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),并且介紹了關(guān)于watch的其他測試,對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編來一起看看吧。2017-08-08