diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue index f02aeae7..a1d56670 100644 --- a/src/components/UploadExcel/index.vue +++ b/src/components/UploadExcel/index.vue @@ -1,7 +1,10 @@ @@ -22,16 +25,35 @@ export default { generateDate({ header, results }) { this.excelData.header = header this.excelData.results = results - this.loading = false this.$emit('on-selected-file', this.excelData) }, + handleDrop(e) { + e.stopPropagation() + e.preventDefault() + const files = e.dataTransfer.files + if (files.length !== 1) { + this.$message.error('Only support uploading one file!') + return + } + const itemFile = files[0] // only use files[0] + this.readerData(itemFile) + e.stopPropagation() + e.preventDefault() + }, + handleDragover(e) { + e.stopPropagation() + e.preventDefault() + e.dataTransfer.dropEffect = 'copy' + }, handleUpload() { document.getElementById('excel-upload-input').click() }, handkeFileChange(e) { - this.loading = true const files = e.target.files const itemFile = files[0] // only use files[0] + this.readerData(itemFile) + }, + readerData(itemFile) { const reader = new FileReader() reader.onload = e => { const data = e.target.result @@ -75,4 +97,16 @@ export default { display: none; z-index: -9999; } +#drop{ + border: 2px dashed #bbb; + width: 600px; + height: 160px; + line-height: 160px; + margin: 0 auto; + font-size: 24px; + border-radius: 5px; + text-align: center; + color: #bbb; + position: relative; +}