Question

我已经构建了一个简单的Drag＆amp; amp;在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>

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'
});

这是我的示例小提琴（带样式）：https://jsfiddle.net/jackbarham/sxfept4t/1

我可以使用dragenter in vanilla JavaScript将其用于（在静态HTML元素上），但不能在Vue生成元素时使用。

Answer 1

使用@dragenter属性将您的方法绑定到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。

Answer 2

在这里回答了问题：http://forum.vuejs.org/topic/1446/add-class-in-drop-area-file-input-when-dragging-an-external-image-over-dragenter/2

使用：@dragenter，@dragleave和:class绑定救援

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

2 个答案: