如何在没有vue3的“composition api”的情况下实现vue3 dropzone？

Question

我正在将一个巨大的项目从 vue2/vuetify2 迁移到两个框架的新版本 3

我们使用的“vue2 dropzone”与vue3不兼容，因此必须升级到较新的“vue3 dropzone”，请参见此处：https://github.com/Yaxian/vue3-dropzone

我找到的如何使用 vue3dropzone 的示例都是使用 vue3 的“composition api”。我不知道如何将其“翻译”为“非组合 api”语法。更改使用 dropzone 的所有现有页面上的语法将花费太多时间，因此我们将不胜感激。

另外，如果有其他一些很好用的文件上传组件，我也有兴趣了解它。

Answer 1

像这样：

<template>
    <div>
        <div v-bind="getRootProps()">
            <input v-bind="getInputProps()" />
            <p v-if="isDragActive">Drop the files here ...</p>
            <p v-else>Drag 'n' drop some files here, or click to select files</p>
        </div>
        <button @click="open">open</button>
    </div>
</template>

<script>
import { useDropzone } from 'vue3-dropzone'

export default {
    name: 'UseDropzoneDemo',
    data() {
        return {
            dropzoneProps: {},
            isDragActive: false,
            open: () => {}
        }
    },
    methods: {
        onDrop(acceptFiles, rejectReasons) {
            console.log(acceptFiles)
            console.log(rejectReasons)
        }
    },
    created() {
        const { getRootProps, getInputProps, isDragActive, open, ...rest } = useDropzone({
            onDrop: this.onDrop
        })

        console.log('isDragActive', isDragActive)
        console.log('open', open)

        this.dropzoneProps = {
            getRootProps,
            getInputProps,
            isDragActive,
            open,
            ...rest
        }
        this.isDragActive = isDragActive
        this.open = open
    },
    computed: {
        getRootProps() {
            return this.dropzoneProps.getRootProps
        },
        getInputProps() {
            return this.dropzoneProps.getInputProps
        }
    }
}
</script>