You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.5 KiB
65 lines
1.5 KiB
4 years ago
|
<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>
|