Javascript 在Vue.js中将外部图像拖动到（dragenter）上时，在拖放区域（文件输入）中添加类

我已经在Vue中输入的文件上构建了一个简单的拖放图像预览。它的工作原理很好，但当图像被拖动到dropzone上时，我想添加一个类，这样它将高亮显示该区域，当您将鼠标悬停在该区域上时，它已经高亮显示了该区域

HTML:

<div id="wrapper">
  <upload-image help="Specific requirements for this dropzone"></upload-image>
</div>

<template id="dropzone">
  <div v-if="!image">
      <div class="dropzone-area" drag-over="handleDragOver">
          <div class="dropzone-text">
              <span class="dropzone-title">Drop image here or click to select</span>
              <span class="dropzone-info" v-if="help">{{ help }}</span>
          </div>
          <input type="file" @change="onFileChange">
      </div>
  </div>
  <div class="dropzone-preview">
      <img :src="image" />
      <button @click="removeImage" v-if="image">Remove</button>
  </div>
</template>

以下是我的小提琴示例（带有样式）：

---

我可以使用（在静态HTML元素上）让它工作，但不能在Vue生成元素时工作。

这里回答了以下问题：

---

使用：

@dragenter

、

@dragleave

和绑定到rescue的

:class

使用

@dragenter

属性将方法绑定到dragenter事件

<div :class="['dropzone-area', dragging ? 'dragenterClass' : '']" drag-over="handleDragOver" @dragenter="dragging=true" @dragend="dragging=false" @dragleave="dragging=false">
...
</div>

---

---

这是一个基于您的代码的链接。

在哪里定义了

handleDragOver

链接不存在

@dragover=“dragging=true”@drop=“dragging=false”@draggeave=“dragging=false”

这样效果更好

<div :class="['dropzone-area', dragging ? 'dragenterClass' : '']" drag-over="handleDragOver" @dragenter="dragging=true" @dragend="dragging=false" @dragleave="dragging=false">
...
</div>

data() {
      return {
          image: '',
          dragging: false
      }
}