Property 'dataTransfer' does not exist on type 'Event'.
时间: 2023-09-24 19:02:36 浏览: 154
抱歉,我之前的回答还是有误。在Vue中,事件处理程序的参数并不是原生DOM事件对象,而是一个经过封装的事件对象。因此,无法直接使用dataTransfer属性。不过,我们可以通过访问原生DOM事件对象来获取dataTransfer属性。以下是更新后的示例代码:
```html
<template>
<div class="drop-zone" @dragstart="onDragStart" @dragend="onDragEnd">
Drag file here
</div>
</template>
<script>
export default {
methods: {
onDragStart(event) {
const file = ... // 获取要托出的文件
const fileURL = URL.createObjectURL(file)
const dataTransfer = event.originalEvent.dataTransfer
dataTransfer.setData('DownloadURL', `application/octet-stream:${file.name}:${fileURL}`)
},
onDragEnd(event) {
const dataTransfer = event.originalEvent.dataTransfer
dataTransfer.clearData('DownloadURL')
}
}
}
</script>
```
在上面的代码中,我们通过访问event.originalEvent来获取原生DOM事件对象,并从中获取dataTransfer属性。然后,我们可以按照之前的方法,将要托出的文件的URL添加到数据传输对象中。
阅读全文