feat: update Badge (#2419)

Co-authored-by: tangjinzhou <415800467@qq.com>

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';
 import isValid from './isValid';
 // function getType(fn) {
@@ -187,7 +187,7 @@ const getComponent = (instance, prop = 'default', options = instance, execute =
 };
 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;
@@ -199,7 +199,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

@@ -2,6 +2,7 @@ import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
 import {
+  Badge,
   AutoComplete,
   Radio,
   Spin,
@@ -23,6 +24,7 @@ import {
   notification,
   message,
 } from 'ant-design-vue';
+
 import 'ant-design-vue/style.js';
 
 const basic = {
@@ -51,6 +53,7 @@ app
   .use(Tooltip)
   .use(Col)
   .use(Row)
+  .use(Badge)
   .use(Radio)
   .use(Switch)
   .use(Checkbox)