feat: update spin (#2351)

Author: xrkffgg

components/spin/Spin.jsx

@@ -1,14 +1,14 @@
+import { inject, cloneVNode } from 'vue';
 import debounce from 'lodash/debounce';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import {
   filterEmpty,
   initDefaultProps,
   isValidElement,
-  getComponentFromProp,
+  getComponent,
   getListeners,
 } from '../_util/props-util';
-import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
 
 export const SpinSize = PropTypes.oneOf(['small', 'default', 'large']);
@@ -47,8 +47,10 @@ export default {
     spinning: true,
     wrapperClassName: '',
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     const { spinning, delay } = this;
@@ -100,7 +102,7 @@ export default {
     renderIndicator(h, prefixCls) {
       // const h = this.$createElement
       const dotClassName = `${prefixCls}-dot`;
-      let indicator = getComponentFromProp(this, 'indicator');
+      let indicator = getComponent(this, 'indicator');
       // should not be render default indicator when indicator value is null
       if (indicator === null) {
         return null;
@@ -110,11 +112,11 @@ export default {
         indicator = indicator.length === 1 ? indicator[0] : indicator;
       }
       if (isValidElement(indicator)) {
-        return cloneElement(indicator, { class: dotClassName });
+        return cloneVNode(indicator, { class: dotClassName });
       }
 
       if (defaultIndicator && isValidElement(defaultIndicator(h))) {
-        return cloneElement(defaultIndicator(h), { class: dotClassName });
+        return cloneVNode(defaultIndicator(h), { class: dotClassName });
       }
 
       return (

components/spin/index.js

@@ -1,14 +1,12 @@
 import Spin, { setDefaultIndicator } from './Spin';
-import Base from '../base';
 
 export { SpinProps } from './Spin';
 
 Spin.setDefaultIndicator = setDefaultIndicator;
 
 /* istanbul ignore next */
-Spin.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Spin.name, Spin);
+Spin.install = function(app) {
+  app.component(Spin.name, Spin);
 };
 
 export default Spin;

examples/index.js

@@ -6,6 +6,7 @@ import Drawer from 'ant-design-vue/drawer';
 import Affix from 'ant-design-vue/affix';
 import Alert from 'ant-design-vue/alert';
 import ConfigProvider from 'ant-design-vue/config-provider';
+import Spin from 'ant-design-vue/Spin';
 import 'ant-design-vue/style.js';
 
 createApp(App)
@@ -14,4 +15,5 @@ createApp(App)
   .use(Drawer)
   .use(Affix)
   .use(Alert)
+  .use(Spin)
   .mount('#app');