feat: update skeleton (#2371)

components/skeleton/index.jsx

@@ -1,3 +1,4 @@
+import { inject } from 'vue';
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps, hasProp } from '../_util/props-util';
@@ -5,7 +6,6 @@ import { ConfigConsumerProps } from '../config-provider';
 import Avatar, { SkeletonAvatarProps } from './Avatar';
 import Title, { SkeletonTitleProps } from './Title';
 import Paragraph, { SkeletonParagraphProps } from './Paragraph';
-import Base from '../base';
 
 export const SkeletonProps = {
   active: PropTypes.bool,
@@ -69,8 +69,10 @@ const Skeleton = {
     title: true,
     paragraph: true,
   }),
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   render() {
     const {
@@ -157,13 +159,12 @@ const Skeleton = {
         </div>
       );
     }
-    const children = this.$slots.default;
+    const children = this.$slots.default && this.$slots.default();
     return children && children.length === 1 ? children[0] : <span>{children}</span>;
   },
 };
 /* istanbul ignore next */
-Skeleton.install = function(Vue) {
+Skeleton.install = function(app) {
-  Vue.use(Base);
+  app.component(Skeleton.name, Skeleton);
-  Vue.component(Skeleton.name, Skeleton);
 };
 export default Skeleton;

examples/index.js

@@ -12,6 +12,7 @@ import Anchor from 'ant-design-vue/anchor';
 import ConfigProvider from 'ant-design-vue/config-provider';
 import Result from 'ant-design-vue/result';
 import Spin from 'ant-design-vue/spin';
+import Skeleton from 'ant-design-vue/skeleton';
 import Empty from 'ant-design-vue/empty';
 import Timeline from 'ant-design-vue/timeline';
 import 'ant-design-vue/style.js';
@@ -27,6 +28,7 @@ createApp(App)
   .use(Divider)
   .use(Result)
   .use(Anchor)
+  .use(Skeleton)
   .use(Spin)
   .use(Empty)
   .use(Timeline)