70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="el-upload-dragger"
|
||
|
|
:class="{
|
||
|
|
'is-dragover': dragover
|
||
|
|
}"
|
||
|
|
@drop.prevent="onDrop"
|
||
|
|
@dragover.prevent="onDragover"
|
||
|
|
@dragleave.prevent="dragover = false"
|
||
|
|
>
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'ElUploadDrag',
|
||
|
|
props: {
|
||
|
|
disabled: Boolean
|
||
|
|
},
|
||
|
|
inject: {
|
||
|
|
uploader: {
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dragover: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onDragover() {
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.dragover = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onDrop(e) {
|
||
|
|
if (this.disabled || !this.uploader) return;
|
||
|
|
const accept = this.uploader.accept;
|
||
|
|
this.dragover = false;
|
||
|
|
if (!accept) {
|
||
|
|
this.$emit('file', e.dataTransfer.files);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
|
||
|
|
const { type, name } = file;
|
||
|
|
const extension = name.indexOf('.') > -1
|
||
|
|
? `.${ name.split('.').pop() }`
|
||
|
|
: '';
|
||
|
|
const baseType = type.replace(/\/.*$/, '');
|
||
|
|
return accept.split(',')
|
||
|
|
.map(type => type.trim())
|
||
|
|
.filter(type => type)
|
||
|
|
.some(acceptedType => {
|
||
|
|
if (/\..+$/.test(acceptedType)) {
|
||
|
|
return extension === acceptedType;
|
||
|
|
}
|
||
|
|
if (/\/\*$/.test(acceptedType)) {
|
||
|
|
return baseType === acceptedType.replace(/\/\*$/, '');
|
||
|
|
}
|
||
|
|
if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
|
||
|
|
return type === acceptedType;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|