diff --git a/components/vc-upload/demo/beforeUpload.jsx b/components/vc-upload/demo/beforeUpload.jsx
new file mode 100644
index 000000000..06c0775d5
--- /dev/null
+++ b/components/vc-upload/demo/beforeUpload.jsx
@@ -0,0 +1,44 @@
+import Upload from '../index'
+
+export default {
+ render () {
+ const uploaderProps = {
+ props: {
+ action: '/upload.do',
+ multiple: true,
+ beforeUpload (file, fileList) {
+ console.log(file, fileList)
+ return new Promise((resolve) => {
+ console.log('start check')
+ setTimeout(() => {
+ console.log('check finshed')
+ resolve(file)
+ }, 3000)
+ })
+ },
+ },
+ on: {
+ start: (file) => {
+ console.log('onStart', file.name)
+ },
+ success (file) {
+ console.log('onSuccess', file)
+ },
+ error (err) {
+ console.log('onError', err)
+ },
+ },
+ }
+ return (
+
+ )
+ },
+}
diff --git a/components/vc-upload/demo/drag.jsx b/components/vc-upload/demo/drag.jsx
new file mode 100644
index 000000000..6ececc91c
--- /dev/null
+++ b/components/vc-upload/demo/drag.jsx
@@ -0,0 +1,32 @@
+import Upload from '../index'
+
+export default {
+ render () {
+ const uploaderProps = {
+ props: {
+ action: '/upload.do',
+ type: 'drag',
+ accept: '.png',
+ beforeUpload (file) {
+ console.log('beforeUpload', file.name)
+ },
+ },
+ on: {
+ start: (file) => {
+ console.log('onStart', file.name)
+ },
+ success (file) {
+ console.log('onSuccess', file)
+ },
+ progress (step, file) {
+ console.log('onProgress', Math.round(step.percent), file.name)
+ },
+ error (err) {
+ console.log('onError', err)
+ },
+ },
+ style: { display: 'inline-block', width: '200px', height: '200px', background: '#eee' },
+ }
+ return
+ },
+}
diff --git a/components/vc-upload/demo/simple.jsx b/components/vc-upload/demo/simple.jsx
new file mode 100644
index 000000000..401448faf
--- /dev/null
+++ b/components/vc-upload/demo/simple.jsx
@@ -0,0 +1,105 @@
+import Upload from '../index'
+
+export default {
+ data () {
+ return {
+ destroyed: false,
+ }
+ },
+ methods: {
+ destroy () {
+ this.destroyed = true
+ },
+ },
+ render () {
+ if (this.destroyed) {
+ return null
+ }
+ const propsObj = {
+ action: '/upload.do',
+ data: { a: 1, b: 2 },
+ headers: {
+ Authorization: 'xxxxxxx',
+ },
+ multiple: true,
+ beforeUpload (file) {
+ console.log('beforeUpload', file.name)
+ },
+ }
+ const propsEvent = {
+ start: (file) => {
+ console.log('onStart', file.name)
+ // this.refs.inner.abort(file);
+ },
+ success (file) {
+ console.log('onSuccess', file)
+ },
+ progress (step, file) {
+ console.log('onProgress', Math.round(step.percent), file.name)
+ },
+ error (err) {
+ console.log('onError', err)
+ },
+ }
+ const uploaderProps = {
+ props: {
+ ...propsObj,
+ },
+ on: {
+ ...propsEvent,
+ },
+ ref: 'inner',
+ }
+ const uploaderProps1 = {
+ props: {
+ ...propsObj,
+ componentTag: 'div',
+ },
+ on: {
+ ...propsEvent,
+ },
+ }
+ const style = `
+ .rc-upload-disabled {
+ opacity:0.5;
+ `
+ return (
+
+
固定位置
+
+
+
+
+
+
滚动
+
+
+
+
+
+ )
+ },
+}
diff --git a/components/vc-upload/src/AjaxUploader.jsx b/components/vc-upload/src/AjaxUploader.jsx
index ab329ab06..8c5de8429 100644
--- a/components/vc-upload/src/AjaxUploader.jsx
+++ b/components/vc-upload/src/AjaxUploader.jsx
@@ -6,9 +6,10 @@ import getUid from './uid'
import attrAccept from './attr-accept'
const upLoadPropTypes = {
- component: PropTypes.string,
+ componentTag: PropTypes.string,
// style: PropTypes.object,
prefixCls: PropTypes.string,
+ action: PropTypes.string,
// className: PropTypes.string,
multiple: PropTypes.bool,
disabled: PropTypes.bool,
@@ -163,24 +164,32 @@ const AjaxUploader = {
},
render () {
const {
- component: Tag, prefixCls, disabled, multiple, accept,
+ componentTag: Tag, prefixCls, disabled, multiple, accept,
} = this.$props
const cls = classNames({
[prefixCls]: true,
[`${prefixCls}-disabled`]: disabled,
})
const events = disabled ? {} : {
- onClick: this.onClick,
- onKeydown: this.onKeyDown,
- onDrop: this.onFileDrop,
- onDragover: this.onFileDrop,
- tabIndex: '0',
+ click: this.onClick,
+ keydown: this.onKeyDown,
+ drop: this.onFileDrop,
+ dragover: this.onFileDrop,
+ }
+ const tagProps = {
+ on: {
+ ...events,
+ ...this.$listeners,
+ },
+ attrs: {
+ role: 'button',
+ tabIndex: disabled ? null : '0',
+ },
+ class: cls,
}
return (
+ return {this.$slots.default}
}
return null
}
const ComponentUploader = this.getComponent()
- return
+ return {this.$slots.default}
},
}
diff --git a/components/vc-upload/src/uid.js b/components/vc-upload/src/uid.js
index 00a9e44f7..27aec08e3 100644
--- a/components/vc-upload/src/uid.js
+++ b/components/vc-upload/src/uid.js
@@ -2,5 +2,5 @@ const now = +(new Date())
let index = 0
export default function uid () {
- return `rc-upload-${now}-${++index}`
+ return `vc-upload-${now}-${++index}`
}
diff --git a/site/routes.js b/site/routes.js
index 6360a0fc8..2b214efe2 100644
--- a/site/routes.js
+++ b/site/routes.js
@@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
const AsyncTestComp = () => {
const d = window.location.hash.replace('#', '')
return {
- component: import(`../components/vc-tree/demo/${d}`),
+ component: import(`../components/vc-upload/demo/${d}`),
}
}