zhangzengfei
2023-09-12 a366f39aa6484628511eb14e38b461de087f4733
src/pages/ai/FileUpload/drop.vue
New file
@@ -0,0 +1,64 @@
<template>
  <div class="uploader-drop" :class="dropClass" ref="drop" v-show="support">
    <slot></slot>
  </div>
</template>
<script>
import { uploaderMixin, supportMixin } from './common/mixins'
const COMPONENT_NAME = 'uploader-drop'
export default {
  name: COMPONENT_NAME,
  mixins: [uploaderMixin, supportMixin],
  data() {
    return {
      dropClass: ''
    }
  },
  methods: {
    onDragEnter() {
      this.dropClass = 'uploader-dragover'
    },
    onDragLeave() {
      this.dropClass = ''
    },
    onDrop() {
      this.dropClass = 'uploader-droped'
    }
  },
  mounted() {
    this.$nextTick(() => {
      const dropEle = this.$refs.drop
      const uploader = this.uploader.uploader
      uploader.assignDrop(dropEle)
      uploader.on('dragenter', this.onDragEnter)
      uploader.on('dragleave', this.onDragLeave)
      uploader.on('drop', this.onDrop)
    })
  },
  beforeDestroy() {
    const dropEle = this.$refs.drop
    const uploader = this.uploader.uploader
    uploader.off('dragenter', this.onDragEnter)
    uploader.off('dragleave', this.onDragLeave)
    uploader.off('drop', this.onDrop)
    uploader.unAssignDrop(dropEle)
  }
}
</script>
<style>
.uploader-drop {
  position: relative;
  padding: 10px;
  overflow: hidden;
  border: 1px dashed #ccc;
  background-color: #f5f5f5;
}
.uploader-dragover {
  border-color: #999;
  background-color: #f7f7f7;
}
</style>