1. 扩展Select组件,注册新的组件(global-components.js文件中进行)
import Vue from ‘vue‘;
import { Upload } from ‘view-design‘;
// 扩展组件
// 拖拽文件上传时检测文件个数(单文件上传,拖拽大于一个报错)
const MyUpload = Vue.extend(Upload).extend({
methods: {
onDrop(e) {
this.dragOver = false;
if (this.itemDisabled) { return; }
/* -- 新加 -- */
if (!this.multiple && e.dataTransfer.files.length > 1) {
this.$emit(‘onFileNumberError‘);
return;
}
/* -- end -- */
this.uploadFiles(e.dataTransfer.files);
},
},
});
// 注册全局组件
Vue.component(‘my-upload‘, MyUpload);
2. main.js中引入上个文件
import "@/components/global-components";
···
3. 使用
<template>
<my-upload @onFileNumberError="onFileNumberError">
</my-upload>
</template>
<script>
export default {
methods: {
onFileNumberError() { this.$Message.error(‘一次只能上传单个文件‘) }
}
}
</script>
用法和原Upload一样,只是多了onFileNumberError用于拖拽多个时报错