feat: update badge

Author: tangjinzhou

components/badge/Badge.jsx

@@ -2,17 +2,12 @@ import PropTypes from '../_util/vue-types';
 import ScrollNumber from './ScrollNumber';
 import { PresetColorTypes } from '../_util/colors';
 import classNames from 'classnames';
-import {
-  initDefaultProps,
-  filterEmpty,
-  getComponentFromProp,
-  getListeners,
-} from '../_util/props-util';
+import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import getTransitionProps from '../_util/getTransitionProps';
 import isNumeric from '../_util/isNumeric';
 import { ConfigConsumerProps } from '../config-provider';
-import { inject } from 'vue';
+import { inject, Transition } from 'vue';
 
 const BadgeProps = {
   /** Number to show in badge */
@@ -82,8 +77,7 @@ export default {
           }
         : { ...numberStyle };
     },
-    getBadgeClassName(prefixCls) {
-      const children = filterEmpty(this.$slots.default && this.$slots.default());
+    getBadgeClassName(prefixCls, children) {
       const hasStatus = this.hasStatus();
       return classNames(prefixCls, {
         [`${prefixCls}-status`]: hasStatus,
@@ -127,9 +121,13 @@ export default {
       if (!customNode || typeof customNode !== 'object') {
         return undefined;
       }
-      return cloneElement(customNode, {
-        style: this.getStyleWithOffset(),
-      });
+      return cloneElement(
+        customNode,
+        {
+          style: this.getStyleWithOffset(),
+        },
+        false,
+      );
     },
 
     renderBadgeNumber(prefixCls, scrollNumberPrefixCls) {
@@ -158,8 +156,8 @@ export default {
         <ScrollNumber
           prefixCls={scrollNumberPrefixCls}
           data-show={!hidden}
-          v-show={!hidden}
-          className={scrollNumberCls}
+          vShow={!hidden}
+          class={scrollNumberCls}
           count={displayCount}
           displayComponent={this.renderDispayComponent()}
           title={this.getScrollNumberTitle()}
@@ -177,15 +175,14 @@ export default {
       status,
       text,
       color,
-      $slots,
     } = this;
 
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('badge', customizePrefixCls);
     const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
 
-    const children = filterEmpty($slots.default && $slots.default());
-    let count = getComponentFromProp(this, 'count');
+    const children = getSlot(this);
+    let count = getComponent(this, 'count');
     if (Array.isArray(count)) {
       count = count[0];
     }
@@ -206,11 +203,7 @@ export default {
       const styleWithOffset = this.getStyleWithOffset();
       const statusTextColor = styleWithOffset && styleWithOffset.color;
       return (
-        <span
-          {...{ on: getListeners(this) }}
-          class={this.getBadgeClassName(prefixCls)}
-          style={styleWithOffset}
-        >
+        <span class={this.getBadgeClassName(prefixCls, children)} style={styleWithOffset}>
           <span class={statusCls} style={statusStyle} />
           <span style={{ color: statusTextColor }} class={`${prefixCls}-status-text`}>
             {text}
@@ -222,9 +215,9 @@ export default {
     const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
 
     return (
-      <span {...{ on: getListeners(this) }} class={this.getBadgeClassName(prefixCls)}>
+      <span class={this.getBadgeClassName(prefixCls, children)}>
         {children}
-        <transition {...transitionProps}>{scrollNumber}</transition>
+        <Transition {...transitionProps}>{scrollNumber}</Transition>
         {statusText}
       </span>
     );

components/badge/ScrollNumber.jsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
-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';
+import syncWatch from '../_util/syncWatch';
 
 function getNumberArray(num) {
   return num
@@ -26,30 +26,32 @@ const ScrollNumberProps = {
   component: PropTypes.string,
   title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
   displayComponent: PropTypes.any,
-  className: PropTypes.object,
 };
 
 export default {
+  name: 'ScrollNumber',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: ScrollNumberProps,
   setup() {
     return {
       configProvider: inject('configProvider', ConfigConsumerProps),
     };
   },
   data() {
+    this.lastCount = undefined;
     return {
       animateStarted: true,
       sCount: this.count,
     };
   },
   watch: {
-    count() {
+    count: syncWatch(function() {
       this.lastCount = this.sCount;
       this.setState({
         animateStarted: true,
       });
-    },
+    }),
   },
   updated() {
     const { animateStarted, count } = this;
@@ -157,31 +159,22 @@ export default {
   },
 
   render() {
-    const {
-      prefixCls: customizePrefixCls,
-      title,
-      component: Tag = 'sup',
-      displayComponent,
-      className,
-    } = this;
+    const { prefixCls: customizePrefixCls, title, component: Tag = 'sup', displayComponent } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
+    const { class: className, style = {} } = this.$attrs;
     if (displayComponent) {
       return cloneElement(displayComponent, {
         class: `${prefixCls}-custom-component`,
       });
     }
-    const style = getStyle(this, true);
     // fix https://fb.me/react-unknown-prop
     const restProps = omit(this.$props, ['count', 'component', 'prefixCls', 'displayComponent']);
+    const tempStyle = { ...style };
     const newProps = {
-      props: {
-        ...restProps,
-      },
-      attrs: {
-        title,
-      },
-      style,
+      ...restProps,
+      title,
+      style: tempStyle,
       class: classNames(prefixCls, className),
     };
     // allow specify the border