多维表格
 
 
 
 
 
 

117 lines
3.1 KiB

<template>
<v-dialog v-model="dropOrUpload" max-width="600">
<v-card max-width="600">
<!-- <div class="pa-4">
<div
class="nc-droppable d-flex align-center justify-center flex-column"
:style="{
background : dragOver ? '#7774' : ''
}"
@click="$refs.file.click()"
@drop.prevent="dropHandler"
@dragover.prevent="dragOver = true"
@dragenter.prevent="dragOver = true"
@dragexit="dragOver = false"
@dragleave="dragOver = false"
@dragend="dragOver = false"
>
<v-icon size="50" color="grey">
mdi-file-plus-outline
</v-icon>
<p class="title grey&#45;&#45;text mb-1 mt-2">
Select {{ text }} file to Upload
</p>
<p class="grey&#45;&#45;text ">
or drag and drop {{ text }} file
</p>
</div>
<input
ref="file"
class="nc-excel-import-input"
type="file"
style="display: none"
:accept="accept"
@change="_change($event)"
>
</div>-->
<drop-or-select-file
:accept="accept"
:text="text"
v-on="$listeners"
/>
</v-card>
</v-dialog>
</template>
<script>
import DropOrSelectFile from '~/components/import/DropOrSelectFile'
export default {
name: 'DropOrSelectFileModal',
components: { DropOrSelectFile },
props: {
value: Boolean,
accept: String,
text: String
},
data() {
return {
dragOver: false
}
},
computed: {
dropOrUpload: {
set(v) {
this.$emit('input', v)
},
get() {
return this.value
}
}
},
methods: {
/* _change(event) {
const files = event.target.files
if (files && files[0]) {
this.$emit('file', files[0])
event.target.value = ''
}
},
dropHandler(ev) {
this.dragOver = false
let file
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
if (ev.dataTransfer.items.length && ev.dataTransfer.items[0].kind === 'file') {
file = ev.dataTransfer.items[0].getAsFile()
}
} else if (ev.dataTransfer.files.length) {
file = ev.dataTransfer.files[0]
}
if (this.accept && !this.accept.split(',').some(ext => file.name.endsWith(ext.trim()))) {
return this.$toast.error(`Dopped file is not an accepted file type. The accepted file types are ${this.accept}!`).goAway(3000)
}
if (file) {
this.$emit('file', file)
}
},
dragOverHandler(ev) {
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault()
} */
}
}
</script>
<style scoped>
/*.nc-droppable {
width: 100%;
min-height: 200px;
border-radius: 4px;
border: 2px dashed var(--v-textColor-lighten5);
}*/
</style>