fix: some upload issue

components/upload/Dragger.jsx

@@ -1,20 +1,21 @@
-import { getOptionProps, getListeners } from '../_util/props-util';
+import { getOptionProps, getSlot } from '../_util/props-util';
 import Upload from './Upload';
 import { UploadProps } from './interface';
 
 export default {
   name: 'AUploadDragger',
+  inheritAttrs: false,
   props: UploadProps,
   render() {
     const props = getOptionProps(this);
+    const { height, ...restProps } = props;
+    const { style, ...restAttrs } = this.$attrs;
     const draggerProps = {
-      props: {
-        ...props,
-        type: 'drag',
-      },
-      on: getListeners(this),
-      style: { height: this.height },
+      ...restProps,
+      ...restAttrs,
+      type: 'drag',
+      style: { ...style, height },
     };
-    return <Upload {...draggerProps}>{this.$slots.default}</Upload>;
+    return <Upload {...draggerProps}>{getSlot(this)}</Upload>;
   },
 };

components/upload/Upload.jsx

@@ -244,6 +244,7 @@ export default {
       disabled,
     } = getOptionProps(this);
     const { sFileList: fileList, dragState } = this.$data;
+    const { class: className, style } = this.$attrs;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('upload', customizePrefixCls);
 
@@ -257,7 +258,6 @@ export default {
       onSuccess: this.onSuccess,
       onReject: this.onReject,
       ref: 'uploadRef',
-      ...this.$attrs,
     };
 
     const uploadList = showUploadList ? (
@@ -272,6 +272,7 @@ export default {
 
     if (type === 'drag') {
       const dragCls = classNames(prefixCls, {
+        [className]: !!className,
         [`${prefixCls}-drag`]: true,
         [`${prefixCls}-drag-uploading`]: fileList.some(file => file.status === 'uploading'),
         [`${prefixCls}-drag-hover`]: dragState === 'dragover',
@@ -284,6 +285,7 @@ export default {
             onDrop={this.onFileDrop}
             onDragover={this.onFileDrop}
             onDragleave={this.onFileDrop}
+            style={style}
           >
             <VcUpload {...vcUploadProps} class={`${prefixCls}-btn`}>
               <div class={`${prefixCls}-drag-container`}>{children}</div>
@@ -303,7 +305,7 @@ export default {
     // Remove id to avoid open by label when trigger is hidden
     // https://github.com/ant-design/ant-design/issues/14298
     if (!children || disabled) {
-      delete vcUploadProps.props.id;
+      delete vcUploadProps.id;
     }
 
     const uploadButton = (

components/upload/UploadList.jsx

@@ -1,6 +1,6 @@
-import { inject, TransitionGroup } from 'vue';
+import { inject, Transition, TransitionGroup } from 'vue';
 import BaseMixin from '../_util/BaseMixin';
-import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
+import { getOptionProps, initDefaultProps } from '../_util/props-util';
 import getTransitionProps from '../_util/getTransitionProps';
 import { ConfigConsumerProps } from '../config-provider';
 import { previewImage, isImageUrl } from './utils';
@@ -66,17 +66,17 @@ export default {
   },
   methods: {
     handlePreview(file, e) {
-      const { preview } = getListeners(this);
-      if (!preview) {
+      const { onPreview } = this.$attrs;
+      if (!onPreview) {
         return;
       }
       e.preventDefault();
       return this.$emit('preview', file);
     },
     handleDownload(file) {
-      const { download } = getListeners(this);
-      if (typeof download === 'function') {
-        download(file);
+      const { onDownload } = this.$attrs;
+      if (typeof onDownload === 'function') {
+        onDownload(file);
       } else if (file.url) {
         window.open(file.url);
       }

components/upload/index.jsx

@@ -1,16 +1,14 @@
 import Upload from './Upload';
 import Dragger from './Dragger';
-import Base from '../base';
 
 export { UploadProps, UploadListProps, UploadChangeParam } from './interface';
 
 Upload.Dragger = Dragger;
 
 /* istanbul ignore next */
-Upload.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Upload.name, Upload);
-  Vue.component(Dragger.name, Dragger);
+Upload.install = function(app) {
+  app.component(Upload.name, Upload);
+  app.component(Dragger.name, Dragger);
 };
 
 export default Upload;

components/vc-progress/src/Circle.js

@@ -1,5 +1,4 @@
 import PropTypes from '../../_util/vue-types';
-import antRef from '../../_util/ant-ref';
 import { initDefaultProps } from '../../_util/props-util';
 import enhancer from './enhancer';
 import { propTypes, defaultProps } from './types';
@@ -71,7 +70,6 @@ function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0,
 
 const Circle = {
   props: initDefaultProps(circlePropTypes, circleDefaultProps),
-  directives: { antRef },
   created() {
     this.paths = {};
     this.gradientId = gradientSeed;
@@ -119,7 +117,7 @@ const Circle = {
           class: `${prefixCls}-circle-path`,
           style: pathStyle,
         };
-        return <path v-antRef={c => (this.paths[index] = c)} {...pathProps} />;
+        return <path ref={c => (this.paths[index] = c)} {...pathProps} />;
       });
     },
   },

components/vc-progress/src/Line.js

@@ -1,11 +1,9 @@
 import { initDefaultProps } from '../../_util/props-util';
-import antRef from '../../_util/ant-ref';
 import enhancer from './enhancer';
 import { propTypes, defaultProps } from './types';
 
 const Line = {
   props: initDefaultProps(propTypes, defaultProps),
-  directives: { antRef },
   created() {
     this.paths = {};
   },
@@ -78,7 +76,7 @@ const Line = {
             style: pathStyle,
           };
 
-          return <path v-antRef={c => (this.paths[index] = c)} {...pathProps} />;
+          return <path ref={c => (this.paths[index] = c)} {...pathProps} />;
         })}
       </svg>
     );

components/vc-upload/src/AjaxUploader.jsx

@@ -6,7 +6,7 @@ import defaultRequest from './request';
 import getUid from './uid';
 import attrAccept from './attr-accept';
 import traverseFileTree from './traverseFileTree';
-import { getListeners, getSlot } from '../../_util/props-util';
+import { getSlot } from '../../_util/props-util';
 
 const upLoadPropTypes = {
   componentTag: PropTypes.string,
@@ -216,9 +216,11 @@ const AjaxUploader = {
       directory,
       openFileDialogOnClick,
     } = $props;
+    const { class: className, style, id } = $attrs;
     const cls = classNames({
       [prefixCls]: true,
       [`${prefixCls}-disabled`]: disabled,
+      [className]: className,
     });
     const events = disabled
       ? {}
@@ -233,11 +235,12 @@ const AjaxUploader = {
       role: 'button',
       tabIndex: disabled ? null : '0',
       class: cls,
+      style,
     };
     return (
       <Tag {...tagProps}>
         <input
-          id={$attrs.id}
+          id={id}
           type="file"
           ref="fileInputRef"
           onClick={e => e.stopPropagation()} // https://github.com/ant-design/ant-design/issues/19948

components/vc-upload/src/IframeUploader.jsx

@@ -257,6 +257,7 @@ const IframeUploader = {
 
   render() {
     const { componentTag: Tag, disabled, prefixCls } = this.$props;
+    const { class: className, style } = this.$attrs;
     const iframeStyle = {
       ...IFRAME_STYLE,
       display: this.uploading || disabled ? 'none' : '',
@@ -264,10 +265,11 @@ const IframeUploader = {
     const cls = classNames({
       [prefixCls]: true,
       [`${prefixCls}-disabled`]: disabled,
+      [className]: className,
     });
 
     return (
-      <Tag className={cls} style={{ position: 'relative', zIndex: 0 }}>
+      <Tag class={cls} style={{ position: 'relative', zIndex: 0, ...style }}>
         <iframe ref="iframeRef" onLoad={this.onLoad} style={iframeStyle} />
         {getSlot(this)}
       </Tag>

components/vc-upload/src/Upload.jsx

@@ -3,6 +3,7 @@ import { initDefaultProps, getSlot } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 import AjaxUpload from './AjaxUploader';
 import IframeUpload from './IframeUploader';
+import { nextTick } from 'vue';
 
 function empty() {}
 
@@ -51,21 +52,19 @@ export default {
     openFileDialogOnClick: true,
   }),
   data() {
+    this.Component = null;
     return {
-      Component: null,
+      // Component: null, // 组件作为响应式数据，性能比较低，采用强制刷新
     };
   },
   mounted() {
     this.$nextTick(() => {
       if (this.supportServerRender) {
-        this.setState(
-          {
-            Component: this.getComponent(),
-          },
-          () => {
-            this.$emit('ready');
-          },
-        );
+        this.Component = this.getComponent();
+        this.$forceUpdate();
+        nextTick(() => {
+          this.$emit('ready');
+        });
       }
     });
   },

examples/App.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/result/demo/index';
+import demo from '../antdv-demo/docs/upload/demo/drag';
 
 export default {
   components: {

examples/index.js

@@ -1,7 +1,7 @@
 import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
-import { Button, Upload, Icon, notification, message } from 'ant-design-vue';
+import { Button, Upload, Icon, Modal, notification, message } from 'ant-design-vue';
 import 'ant-design-vue/style.js';
 
 const basic = {
@@ -21,4 +21,5 @@ app
   .use(Upload)
   .use(Button)
   .use(Icon)
+  .use(Modal)
   .mount('#app');