feat: update Badge

Author: liulinboyi

components/_util/props-util.js

@@ -1,6 +1,6 @@
 import isPlainObject from 'lodash/isPlainObject';
 import classNames from 'classnames';
-import { isVNode, Fragment, Comment, Text } from 'vue';
+import { isVNode, Fragment, Comment, Text, h } from 'vue';
 import { camelize, hyphenate, isOn, resolvePropValue } from './util';
 // function getType(fn) {
 //   const match = fn && fn.toString().match(/^\s*function (\w+)/);
@@ -129,7 +129,7 @@ const getComponent = (instance, prop, options = instance, execute = true) => {
 };
 const getComponentFromProp = (instance, prop, options = instance, execute = true) => {
   if (instance.$createElement) {
-    const h = instance.$createElement;
+    // const h = instance.$createElement;
     const temp = instance[prop];
     if (temp !== undefined) {
       return typeof temp === 'function' && execute ? temp(h, options) : temp;
@@ -141,7 +141,7 @@ const getComponentFromProp = (instance, prop, options = instance, execute = true
       undefined
     );
   } else {
-    const h = instance.context.$createElement;
+    // const h = instance.context.$createElement;
     const temp = getPropsData(instance)[prop];
     if (temp !== undefined) {
       return typeof temp === 'function' && execute ? temp(h, options) : temp;

components/badge/Badge.jsx

@@ -12,6 +12,7 @@ import { cloneElement } from '../_util/vnode';
 import getTransitionProps from '../_util/getTransitionProps';
 import isNumeric from '../_util/isNumeric';
 import { ConfigConsumerProps } from '../config-provider';
+import { inject } from 'vue';
 
 const BadgeProps = {
   /** Number to show in badge */
@@ -40,8 +41,10 @@ export default {
     dot: false,
     overflowCount: 99,
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   methods: {
     getNumberedDispayCount() {
@@ -80,7 +83,7 @@ export default {
         : { ...numberStyle };
     },
     getBadgeClassName(prefixCls) {
-      const children = filterEmpty(this.$slots.default);
+      const children = filterEmpty(this.$slots.default && this.$slots.default());
       const hasStatus = this.hasStatus();
       return classNames(prefixCls, {
         [`${prefixCls}-status`]: hasStatus,
@@ -181,7 +184,7 @@ export default {
     const prefixCls = getPrefixCls('badge', customizePrefixCls);
     const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
 
-    const children = filterEmpty($slots.default);
+    const children = filterEmpty($slots.default && $slots.default());
     let count = getComponentFromProp(this, 'count');
     if (Array.isArray(count)) {
       count = count[0];

components/badge/ScrollNumber.jsx

@@ -5,6 +5,7 @@ import { getStyle } from '../_util/props-util';
 import omit from 'omit.js';
 import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
+import { inject } from 'vue';
 
 function getNumberArray(num) {
   return num
@@ -31,8 +32,10 @@ const ScrollNumberProps = {
 export default {
   mixins: [BaseMixin],
   props: ScrollNumberProps,
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     return {

components/badge/index.js

@@ -1,10 +1,8 @@
 import Badge from './Badge';
-import Base from '../base';
 
 /* istanbul ignore next */
-Badge.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Badge.name, Badge);
+Badge.install = function(app) {
+  app.component(Badge.name, Badge);
 };
 
 export default Badge;

examples/index.js

@@ -29,6 +29,7 @@ import Popover from 'ant-design-vue/popover';
 import notification from 'ant-design-vue/notification';
 import message from 'ant-design-vue/message';
 import Modal from 'ant-design-vue/modal';
+import Badge from 'ant-design-vue/badge';
 import 'ant-design-vue/style.js';
 
 const app = createApp(App);
@@ -61,4 +62,5 @@ app
   .use(Popconfirm)
   .use(Popover)
   .use(Modal)
+  .use(Badge)
   .mount('#app');