欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Vue3文件拖拽上傳功能實(shí)現(xiàn)

 更新時(shí)間:2022年10月27日 11:01:11   作者:明知山_  
這篇文章主要介紹了Vue3文件拖拽上傳功能,支持拖拽到此區(qū)域上傳,支持選擇多個(gè)文件/文件夾,代碼很簡(jiǎn)單,對(duì)vue3拖拽上傳功能感興趣的朋友一起看看吧

文件上成功能在我們的身邊經(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搭建微信小程序項(xiàng)目框架的教程詳解

    mpvue從底層支持 Vue.js 語(yǔ)法和構(gòu)建工具體系,同時(shí)再結(jié)合相關(guān)UI組件庫(kù),便可以高效的實(shí)現(xiàn)小程序開發(fā)。這篇文章主要介紹了基于mpvue搭建小程序項(xiàng)目框架 ,需要的朋友可以參考下
    2019-04-04
  • Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例

    Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例

    今天小編就為大家分享一篇Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D

    vue用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
  • 關(guān)于vue組件事件屬性穿透詳解

    關(guān)于vue組件事件屬性穿透詳解

    今天小編就為大家分享一篇關(guān)于vue組件事件屬性穿透詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-10-10
  • 使用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例分析

    使用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例分析

    這篇文章主要介紹了用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例,需要的朋友可以參考下
    2018-01-01
  • Vue.js的Mixins使用方式

    Vue.js的Mixins使用方式

    Vue.js的Mixins功能允許封裝可復(fù)用的組件選項(xiàng),實(shí)現(xiàn)代碼復(fù)用和模塊化,Mixins可以包含數(shù)據(jù)、方法、生命周期鉤子等組件選項(xiàng),使用時(shí),Mixins中的選項(xiàng)會(huì)被混入組件中,優(yōu)先級(jí)低于組件自身選項(xiàng),優(yōu)點(diǎn)包括代碼復(fù)用、高靈活性和簡(jiǎn)單易用
    2024-09-09
  • 深入理解vue.js中$watch的oldvalue與newValue

    深入理解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-08
  • vue如何使用文件流進(jìn)行下載(new Blob)

    vue如何使用文件流進(jìn)行下載(new Blob)

    這篇文章主要介紹了vue如何使用文件流進(jìn)行下載(new Blob),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue+ElementUI啟動(dòng)vue卡死的問(wèn)題及解決

    Vue+ElementUI啟動(dòng)vue卡死的問(wèn)題及解決

    這篇文章主要介紹了Vue+ElementUI啟動(dòng)vue卡死的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 一篇文章帶你了解vue.js的事件循環(huán)機(jī)制

    一篇文章帶你了解vue.js的事件循環(huán)機(jī)制

    這篇文章主要為大家詳細(xì)介紹了vue.js事件循環(huán)機(jī)制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-03-03

最新評(píng)論