Skip to content

Commit 25631cf

Browse files
wangxueliangwangxueliang
committed
add vc-upload demo
1 parent c1cd8f4 commit 25631cf

File tree

8 files changed

+216
-18
lines changed

8 files changed

+216
-18
lines changed

‎components/vc-upload/demo/beforeUpload.jsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Upload from '../index'
2+
3+
export default {
4+
render () {
5+
const uploaderProps = {
6+
props: {
7+
action: '/upload.do',
8+
multiple: true,
9+
beforeUpload (file, fileList) {
10+
console.log(file, fileList)
11+
return new Promise((resolve) => {
12+
console.log('start check')
13+
setTimeout(() => {
14+
console.log('check finshed')
15+
resolve(file)
16+
}, 3000)
17+
})
18+
},
19+
},
20+
on: {
21+
start: (file) => {
22+
console.log('onStart', file.name)
23+
},
24+
success (file) {
25+
console.log('onSuccess', file)
26+
},
27+
error (err) {
28+
console.log('onError', err)
29+
},
30+
},
31+
}
32+
return (
33+
<div
34+
style={{
35+
margin: '100px',
36+
}}
37+
>
38+
<div>
39+
<Upload {...uploaderProps}><a>开始上传</a></Upload>
40+
</div>
41+
</div>
42+
)
43+
},
44+
}

‎components/vc-upload/demo/drag.jsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Upload from '../index'
2+
3+
export default {
4+
render () {
5+
const uploaderProps = {
6+
props: {
7+
action: '/upload.do',
8+
type: 'drag',
9+
accept: '.png',
10+
beforeUpload (file) {
11+
console.log('beforeUpload', file.name)
12+
},
13+
},
14+
on: {
15+
start: (file) => {
16+
console.log('onStart', file.name)
17+
},
18+
success (file) {
19+
console.log('onSuccess', file)
20+
},
21+
progress (step, file) {
22+
console.log('onProgress', Math.round(step.percent), file.name)
23+
},
24+
error (err) {
25+
console.log('onError', err)
26+
},
27+
},
28+
style: { display: 'inline-block', width: '200px', height: '200px', background: '#eee' },
29+
}
30+
return <Upload {...uploaderProps}></Upload>
31+
},
32+
}

‎components/vc-upload/demo/simple.jsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import Upload from '../index'
2+
3+
export default {
4+
data () {
5+
return {
6+
destroyed: false,
7+
}
8+
},
9+
methods: {
10+
destroy () {
11+
this.destroyed = true
12+
},
13+
},
14+
render () {
15+
if (this.destroyed) {
16+
return null
17+
}
18+
const propsObj = {
19+
action: '/upload.do',
20+
data: { a: 1, b: 2 },
21+
headers: {
22+
Authorization: 'xxxxxxx',
23+
},
24+
multiple: true,
25+
beforeUpload (file) {
26+
console.log('beforeUpload', file.name)
27+
},
28+
}
29+
const propsEvent = {
30+
start: (file) => {
31+
console.log('onStart', file.name)
32+
// this.refs.inner.abort(file);
33+
},
34+
success (file) {
35+
console.log('onSuccess', file)
36+
},
37+
progress (step, file) {
38+
console.log('onProgress', Math.round(step.percent), file.name)
39+
},
40+
error (err) {
41+
console.log('onError', err)
42+
},
43+
}
44+
const uploaderProps = {
45+
props: {
46+
...propsObj,
47+
},
48+
on: {
49+
...propsEvent,
50+
},
51+
ref: 'inner',
52+
}
53+
const uploaderProps1 = {
54+
props: {
55+
...propsObj,
56+
componentTag: 'div',
57+
},
58+
on: {
59+
...propsEvent,
60+
},
61+
}
62+
const style = `
63+
.rc-upload-disabled {
64+
opacity:0.5;
65+
`
66+
return (
67+
<div
68+
style={{
69+
margin: '100px',
70+
}}
71+
>
72+
<h2>固定位置</h2>
73+
74+
<style>
75+
{style}
76+
</style>
77+
78+
<div>
79+
<Upload {...uploaderProps}><a>开始上传</a></Upload>
80+
</div>
81+
82+
<h2>滚动</h2>
83+
84+
<div
85+
style={{
86+
height: '200px',
87+
overflow: 'auto',
88+
border: '1px solid red',
89+
}}
90+
>
91+
<div
92+
style={{
93+
height: '500px',
94+
}}
95+
>
96+
<Upload {...uploaderProps1} style={{ display: 'inline-block' }}>
97+
<a>开始上传2</a></Upload>
98+
</div>
99+
</div>
100+
101+
<button onClick={this.destroy}>destroy</button>
102+
</div>
103+
)
104+
},
105+
}

‎components/vc-upload/src/AjaxUploader.jsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import getUid from './uid'
66
import attrAccept from './attr-accept'
77

88
const upLoadPropTypes = {
9-
component: PropTypes.string,
9+
componentTag: PropTypes.string,
1010
// style: PropTypes.object,
1111
prefixCls: PropTypes.string,
12+
action: PropTypes.string,
1213
// className: PropTypes.string,
1314
multiple: PropTypes.bool,
1415
disabled: PropTypes.bool,
@@ -163,24 +164,32 @@ const AjaxUploader = {
163164
},
164165
render () {
165166
const {
166-
component: Tag, prefixCls, disabled, multiple, accept,
167+
componentTag: Tag, prefixCls, disabled, multiple, accept,
167168
} = this.$props
168169
const cls = classNames({
169170
[prefixCls]: true,
170171
[`${prefixCls}-disabled`]: disabled,
171172
})
172173
const events = disabled ? {} : {
173-
onClick: this.onClick,
174-
onKeydown: this.onKeyDown,
175-
onDrop: this.onFileDrop,
176-
onDragover: this.onFileDrop,
177-
tabIndex: '0',
174+
click: this.onClick,
175+
keydown: this.onKeyDown,
176+
drop: this.onFileDrop,
177+
dragover: this.onFileDrop,
178+
}
179+
const tagProps = {
180+
on: {
181+
...events,
182+
...this.$listeners,
183+
},
184+
attrs: {
185+
role: 'button',
186+
tabIndex: disabled ? null : '0',
187+
},
188+
class: cls,
178189
}
179190
return (
180191
<Tag
181-
{...events}
182-
class={cls}
183-
role='button'
192+
{...tagProps}
184193
>
185194
<input
186195
type='file'

‎components/vc-upload/src/IframeUploader.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const IFRAME_STYLE = {
1717
const IframeUploader = {
1818
mixins: [BaseMixin],
1919
props: {
20-
component: PropTypes.string,
20+
componentTag: PropTypes.string,
2121
// style: PropTypes.object,
2222
disabled: PropTypes.bool,
2323
prefixCls: PropTypes.string,
@@ -242,7 +242,7 @@ const IframeUploader = {
242242

243243
render () {
244244
const {
245-
component: Tag, disabled,
245+
componentTag: Tag, disabled,
246246
prefixCls,
247247
} = this.$props
248248
const iframeStyle = {
@@ -253,6 +253,7 @@ const IframeUploader = {
253253
[prefixCls]: true,
254254
[`${prefixCls}-disabled`]: disabled,
255255
})
256+
256257
return (
257258
<Tag
258259
className={cls}

‎components/vc-upload/src/Upload.jsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import IframeUpload from './IframeUploader'
88
// }
99

1010
const uploadProps = {
11-
component: PropTypes.string,
11+
componentTag: PropTypes.string,
1212
prefixCls: PropTypes.string,
1313
action: PropTypes.string,
1414
name: PropTypes.string,
@@ -35,7 +35,7 @@ export default {
3535
name: 'Upload',
3636
mixins: [BaseMixin],
3737
props: initDefaultProps(uploadProps, {
38-
component: 'span',
38+
componentTag: 'span',
3939
prefixCls: 'rc-upload',
4040
data: {},
4141
headers: {},
@@ -78,14 +78,21 @@ export default {
7878
},
7979

8080
render () {
81+
const componentProps = {
82+
props: {
83+
...this.$props,
84+
},
85+
on: this.$listeners,
86+
ref: 'uploaderRef',
87+
}
8188
if (this.supportServerRender) {
8289
const ComponentUploader = this.Component
8390
if (ComponentUploader) {
84-
return <ComponentUploader {...this.$props} ref='uploaderRef' />
91+
return <ComponentUploader {...componentProps} >{this.$slots.default}</ComponentUploader>
8592
}
8693
return null
8794
}
8895
const ComponentUploader = this.getComponent()
89-
return <ComponentUploader {...this.$props} ref='uploaderRef' />
96+
return <ComponentUploader {...componentProps} >{this.$slots.default}</ComponentUploader>
9097
},
9198
}

‎components/vc-upload/src/uid.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ const now = +(new Date())
22
let index = 0
33

44
export default function uid () {
5-
return `rc-upload-${now}-${++index}`
5+
return `vc-upload-${now}-${++index}`
66
}

‎site/routes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
33
const AsyncTestComp = () => {
44
const d = window.location.hash.replace('#', '')
55
return {
6-
component: import(`../components/vc-tree/demo/${d}`),
6+
component: import(`../components/vc-upload/demo/${d}`),
77
}
88
}
99

0 commit comments

Comments
 (0)