当前位置 : 主页 > 网络编程 > JavaScript >

基于Vue3文件拖拽上传功能实现

来源:互联网 收集:自由互联 发布时间:2023-02-01
文件上成功能在我们的身边经常遇到,下面小编通过实例代码给大家分享实现方法,效果图如下所示: template div :class="['drag', { 'drag-active': active }]" ref="drag" p class="drag-title"未选择文件

文件上成功能在我们的身边经常遇到,下面小编通过实例代码给大家分享实现方法,效果图如下所示:

<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拖拽上传内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联!

上一篇:Object.assign触发watch原理示例解析
下一篇:没有了
网友评论