基于Vue3文件拖拽上傳功能實(shí)現(xiàn)
文件上成功能在我們的身邊經(jīng)常遇到,下面小編通過(guò)實(shí)例代碼給大家分享實(shí)現(xiàn)方法,效果圖如下所示:
<template> <div :class="['drag', { 'drag-active': active }]" ref="drag"> <p class="drag-title">未選擇文件/文件夾</p> <p class="drag-subtile"> 支持拖拽到此區(qū)域上傳,支持選擇多個(gè)文件/文件夾 <br /> 單個(gè)文件夾最大支持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文件拖拽上傳功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3拖拽上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于mpvue搭建微信小程序項(xiàng)目框架的教程詳解
mpvue從底層支持 Vue.js 語(yǔ)法和構(gòu)建工具體系,同時(shí)再結(jié)合相關(guān)UI組件庫(kù),便可以高效的實(shí)現(xiàn)小程序開發(fā)。這篇文章主要介紹了基于mpvue搭建小程序項(xiàng)目框架 ,需要的朋友可以參考下2019-04-04Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例
今天小編就為大家分享一篇Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D
這篇文章主要介紹了vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10使用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例分析
這篇文章主要介紹了用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例,需要的朋友可以參考下2018-01-01深入理解vue.js中$watch的oldvalue與newValue
這篇文章主要給大家介紹了關(guān)于vue.js中$watch的oldvalue與newValue的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),并且介紹了關(guān)于watch的其他測(cè)試,對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起看看吧。2017-08-08Vue+ElementUI啟動(dòng)vue卡死的問(wèn)題及解決
這篇文章主要介紹了Vue+ElementUI啟動(dòng)vue卡死的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03一篇文章帶你了解vue.js的事件循環(huán)機(jī)制
這篇文章主要為大家詳細(xì)介紹了vue.js事件循環(huán)機(jī)制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-03-03