mirror of https://github.com/ElemeFE/element
add api migrating
parent
98850a1832
commit
691c6709ef
|
@ -258,7 +258,7 @@ on-progress | hook function when some progress occurs | function(event, file, fi
|
||||||
on-change | hook function when file status change | function(file, fileList) | — | — |
|
on-change | hook function when file status change | function(file, fileList) | — | — |
|
||||||
before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` or a `Promise` is returned, uploading will be aborted | function(file) | — | —
|
before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` or a `Promise` is returned, uploading will be aborted | function(file) | — | —
|
||||||
thumbnail-mode | whether thumbnail is displayed | boolean | — | false
|
thumbnail-mode | whether thumbnail is displayed | boolean | — | false
|
||||||
default-file-list | default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
|
file-list | default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
|
||||||
list-type | type of fileList | string | text/picture/picture-card | text |
|
list-type | type of fileList | string | text/picture/picture-card | text |
|
||||||
auto-upload | whether to auto upload file | boolean | — | true |
|
auto-upload | whether to auto upload file | boolean | — | true |
|
||||||
|
|
||||||
|
|
|
@ -307,7 +307,7 @@
|
||||||
| before-upload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
|
| before-upload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
|
||||||
| list-type | 文件列表的类型 | string | text/picture/picture-card | text |
|
| list-type | 文件列表的类型 | string | text/picture/picture-card | text |
|
||||||
| auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
|
| auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
|
||||||
| fileList | 上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
|
| file-list | 上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
| 方法名 | 说明 | 参数 |
|
| 方法名 | 说明 | 参数 |
|
||||||
|
|
|
@ -88,7 +88,7 @@
|
||||||
border-color: var(--color-primary);
|
border-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
@when dragOver {
|
@when dragover {
|
||||||
background-color: rgba(32, 159, 255, .06);
|
background-color: rgba(32, 159, 255, .06);
|
||||||
border: 2px dashed var(--color-primary);
|
border: 2px dashed var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,12 +3,15 @@ import UploadList from './upload-list';
|
||||||
import Upload from './upload';
|
import Upload from './upload';
|
||||||
import IframeUpload from './iframe-upload';
|
import IframeUpload from './iframe-upload';
|
||||||
import ElProgress from 'element-ui/packages/progress';
|
import ElProgress from 'element-ui/packages/progress';
|
||||||
|
import Migrating from 'element-ui/src/mixins/migrating';
|
||||||
|
|
||||||
function noop() {}
|
function noop() {}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ElUpload',
|
name: 'ElUpload',
|
||||||
|
|
||||||
|
mixins: [Migrating],
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
ElProgress,
|
ElProgress,
|
||||||
UploadList,
|
UploadList,
|
||||||
|
@ -36,7 +39,6 @@ export default {
|
||||||
drag: Boolean,
|
drag: Boolean,
|
||||||
dragger: Boolean,
|
dragger: Boolean,
|
||||||
withCredentials: Boolean,
|
withCredentials: Boolean,
|
||||||
thumbnailMode: Boolean,
|
|
||||||
showFileList: {
|
showFileList: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
@ -180,6 +182,15 @@ export default {
|
||||||
.forEach(file => {
|
.forEach(file => {
|
||||||
this.$refs['upload-inner'].upload(file.raw, file);
|
this.$refs['upload-inner'].upload(file.raw, file);
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
getMigratingConfig() {
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
'default-file-list': 'default-file-list is renamed to file-list.',
|
||||||
|
'show-upload-list': 'show-file-list is renamed to show-file-list.',
|
||||||
|
'thumbnail-mode': 'thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan'
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -208,7 +219,7 @@ export default {
|
||||||
headers: this.headers,
|
headers: this.headers,
|
||||||
name: this.name,
|
name: this.name,
|
||||||
data: this.data,
|
data: this.data,
|
||||||
accept: this.thumbnailMode ? 'image/gif, image/png, image/jpeg, image/bmp, image/webp' : this.accept,
|
accept: this.accept,
|
||||||
fileList: this.uploadFiles,
|
fileList: this.uploadFiles,
|
||||||
autoUpload: this.autoUpload,
|
autoUpload: this.autoUpload,
|
||||||
listType: this.listType,
|
listType: this.listType,
|
||||||
|
|
|
@ -2,11 +2,11 @@
|
||||||
<div
|
<div
|
||||||
class="el-upload-dragger"
|
class="el-upload-dragger"
|
||||||
:class="{
|
:class="{
|
||||||
'is-dragOver': dragOver
|
'is-dragover': dragover
|
||||||
}"
|
}"
|
||||||
@drop.prevent="onDrop"
|
@drop.prevent="onDrop"
|
||||||
@dragover.prevent="dragOver = true"
|
@dragover.prevent="dragover = true"
|
||||||
@dragleave.prevent="dragOver = false"
|
@dragleave.prevent="dragover = false"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
@ -17,12 +17,12 @@
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dragOver: false
|
dragover: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onDrop(e) {
|
onDrop(e) {
|
||||||
this.dragOver = false;
|
this.dragover = false;
|
||||||
this.$emit('file', e.dataTransfer.files);
|
this.$emit('file', e.dataTransfer.files);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue