javascript - 在 Vue.js 中将外部图像拖过(dragenter)时在放置区域(文件输入)添加类

Question

我在 Vue 中的文件输入上构建了一个简单的拖放图像预览。它工作正常，但是当图像被拖到拖放区上时，我想添加一个类，以便它会突出显示该区域，当您将鼠标悬停在它上面时它已经这样做了。

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>

JavaScript(Vue.js):

Vue.component('upload-image', {

  template: '#dropzone',

  props: ['help'],

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

  methods: {
      onFileChange(e) {
          var files = e.target.files || e.dataTransfer.files;
          if (!files.length) return;
          this.createImage(files[0]);
      },
      createImage(file) {
          var image = new Image();
          var reader = new FileReader();
          var vm = this;

          reader.onload = (e) => {
              vm.image = e.target.result;
          };
          reader.readAsDataURL(file);
      },
      removeImage: function (e) {
          this.image = '';
      }
  }

});

new Vue({
    el: '#wrapper'
});

这是我的示例 fiddle (带有样式):https://jsfiddle.net/jackbarham/sxfept4t/1

我可以使用 dragenter in vanilla JavaScript 让它工作(在静态 HTML 元素上) ，但不是当元素由 Vue 生成时。

Answer 1

使用 @dragenter 属性将您的方法绑定(bind)到 dragenter 事件。

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

在数据部分:

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

---

这是一个 example基于您的代码。