add vc-upload demo

Author: wangxueliang

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 (
+      <div
+        style={{
+          margin: '100px',
+        }}
+      >
+        <div>
+          <Upload {...uploaderProps}><a>开始上传</a></Upload>
+        </div>
+      </div>
+    )
+  },
+}

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 <Upload {...uploaderProps}></Upload>
+  },
+}

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 (
+      <div
+        style={{
+          margin: '100px',
+        }}
+      >
+        <h2>固定位置</h2>
+
+        <style>
+          {style}
+        </style>
+
+        <div>
+          <Upload {...uploaderProps}><a>开始上传</a></Upload>
+        </div>
+
+        <h2>滚动</h2>
+
+        <div
+          style={{
+            height: '200px',
+            overflow: 'auto',
+            border: '1px solid red',
+          }}
+        >
+          <div
+            style={{
+              height: '500px',
+            }}
+          >
+            <Upload {...uploaderProps1} style={{ display: 'inline-block' }}>
+              <a>开始上传2</a></Upload>
+          </div>
+        </div>
+
+        <button onClick={this.destroy}>destroy</button>
+      </div>
+    )
+  },
+}

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 (
       <Tag
-        {...events}
-        class={cls}
-        role='button'
+        {...tagProps}
       >
         <input
           type='file'

components/vc-upload/src/IframeUploader.jsx

@@ -17,7 +17,7 @@ const IFRAME_STYLE = {
 const IframeUploader = {
   mixins: [BaseMixin],
   props: {
-    component: PropTypes.string,
+    componentTag: PropTypes.string,
     // style: PropTypes.object,
     disabled: PropTypes.bool,
     prefixCls: PropTypes.string,
@@ -242,7 +242,7 @@ const IframeUploader = {
 
   render () {
     const {
-      component: Tag, disabled,
+      componentTag: Tag, disabled,
       prefixCls,
     } = this.$props
     const iframeStyle = {
@@ -253,6 +253,7 @@ const IframeUploader = {
       [prefixCls]: true,
       [`${prefixCls}-disabled`]: disabled,
     })
+
     return (
       <Tag
         className={cls}

components/vc-upload/src/Upload.jsx

@@ -8,7 +8,7 @@ import IframeUpload from './IframeUploader'
 // }
 
 const uploadProps = {
-  component: PropTypes.string,
+  componentTag: PropTypes.string,
   prefixCls: PropTypes.string,
   action: PropTypes.string,
   name: PropTypes.string,
@@ -35,7 +35,7 @@ export default {
   name: 'Upload',
   mixins: [BaseMixin],
   props: initDefaultProps(uploadProps, {
-    component: 'span',
+    componentTag: 'span',
     prefixCls: 'rc-upload',
     data: {},
     headers: {},
@@ -78,14 +78,21 @@ export default {
   },
 
   render () {
+    const componentProps = {
+      props: {
+        ...this.$props,
+      },
+      on: this.$listeners,
+      ref: 'uploaderRef',
+    }
     if (this.supportServerRender) {
       const ComponentUploader = this.Component
       if (ComponentUploader) {
-        return <ComponentUploader {...this.$props} ref='uploaderRef' />
+        return <ComponentUploader {...componentProps} >{this.$slots.default}</ComponentUploader>
       }
       return null
     }
     const ComponentUploader = this.getComponent()
-    return <ComponentUploader {...this.$props} ref='uploaderRef' />
+    return <ComponentUploader {...componentProps} >{this.$slots.default}</ComponentUploader>
   },
 }

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}`
 }

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}`),
   }
 }