vue生成拖拽附件组件

好的，以下是一个基于 Vue.js 的拖拽附件组件的实现：

<template>
  <div class="drop-area" :class="{'dragging': isDragging}" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
    <p v-if="!isDragging">将文件拖到此区域上传</p>
    <p v-else>松开鼠标上传</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false
    };
  },
  methods: {
    onDragOver(event) {
      this.isDragging = true;
    },
    onDragLeave(event) {
      this.isDragging = false;
    },
    onDrop(event) {
      this.isDragging = false;

      const files = event.dataTransfer.files;
      if (files.length > 0) {
        this.handleFiles(files);
      }
    },
    handleFiles(files) {
      // 处理每一个文件
      for (const file of files) {
        console.log(file.name, file.type, file.size);
        // 上传文件或进行其他操作
      }
    }
  }
};
</script>

<style>
.drop-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
.dragging {
  background-color: #f0f0f0;
}
</style>

上述代码中，我们使用 `isDragging` 来控制拖动状态，并根据状态来显示不同的提示信息。在 `onDragOver`、`onDragLeave` 和 `onDrop` 方法中，我们通过改变 `isDragging` 的值来控制拖动状态，并处理拖放事件。在 `onDrop` 方法中，我们通过 `event.dataTransfer.files` 获取拖放的文件列表，并通过 `handleFiles` 函数来处理每一个文件。你可以根据具体需求来对 `handleFiles` 函数进行修改，比如上传文件或进行其他操作。

同时，我们在组件中使用了 CSS 样式来设置拖放区域的边框和背景色。你可以根据具体需求来修改样式。