refactor(badge): use composition api to refactor badge component

src/badge/badge.tsx

@@ -1,73 +1,84 @@
-import { defineComponent, ComponentPublicInstance } from 'vue';
-import { prefix } from '../config';
+import { defineComponent, computed } from 'vue';
 import props from './props';
-import { renderTNodeJSX } from '../utils/render-tnode';
-
-const name = `${prefix}-badge`;
+import { useTNodeJSX } from '../hooks/tnode';
+import { useConfig } from '../config-provider/useConfig';
 
 export default defineComponent({
   name: 'TBadge',
 
   props: { ...props },
 
-  methods: {
-    getContent() {
-      if (this.dot) return '';
-      if (typeof this.count === 'function') {
-        return renderTNodeJSX(this, 'count');
+  setup(props) {
+    const renderTNodeJSX = useTNodeJSX();
+
+    /** 内容计算相关逻辑 start */
+    const content = computed(() => {
+      if (props.dot) return '';
+      if (typeof props.count === 'function') {
+        return renderTNodeJSX('count');
       }
-      if (Number.isNaN(Number(this.count))) {
-        return this.count;
+      if (Number.isNaN(Number(props.count))) {
+        return props.count;
       }
-      const count = Number(this.count);
-      return count > this.maxCount ? `${this.maxCount}+` : count;
-    },
-    isSmall() {
-      return this.size === 'small';
-    },
-    isZero() {
-      const content = this.getContent();
-      return content === 0 || content === '0';
-    },
-    isHidden() {
-      return !this.showZero && this.isZero();
-    },
-    getOffset() {
-      if (!this.offset) return {};
-      let [xOffset, yOffset]: Array<string | number> = this.offset;
+      const count = Number(props.count);
+      return count > props.maxCount ? `${props.maxCount}+` : count;
+    });
+
+    const renderChildren = () => renderTNodeJSX('default');
+
+    const getOffset = () => {
+      if (!props.offset) return {};
+      let [xOffset, yOffset]: Array<string | number> = props.offset;
       xOffset = Number.isNaN(Number(xOffset)) ? xOffset : `${xOffset}px`;
       yOffset = Number.isNaN(Number(yOffset)) ? yOffset : `${yOffset}px`;
       return { xOffset, yOffset };
-    },
-  },
+    };
+    /** 内容计算相关逻辑 end */
 
-  render() {
-    const { dot, shape, color } = this.$props;
+    /** 样式计算相关逻辑 start */
+    const { classPrefix } = useConfig('classPrefix');
+    const name = `${classPrefix.value}-badge`;
+    const isHidden = computed(() => {
+      return !props.showZero && (content.value === 0 || content.value === '0');
+    });
+
+    const badgeClassNames = computed(() => {
+      return [
+        {
+          [`${name}--dot`]: !!props.dot,
+          [`${name}--circle`]: !props.dot && props.shape === 'circle',
+          [`${name}--round`]: props.shape === 'round',
+          't-size-s': props.size === 'small',
+        },
+      ];
+    });
 
-    const content = this.getContent();
-    const isHidden = this.isHidden();
-    const children = this.$slots.default ? this.$slots.default(null) : '';
-    const { xOffset, yOffset } = this.getOffset();
-    const badgeClassNames = [
-      {
-        [`${name}--dot`]: !!dot,
-        [`${name}--circle`]: !dot && shape === 'circle',
-        [`${name}--round`]: shape === 'round',
-        't-size-s': this.isSmall(),
-      },
-    ];
-    const inlineStyle = {
-      background: `${color}`,
-      right: xOffset,
-      top: yOffset,
+    const inlineStyle = computed(() => {
+      const { xOffset, yOffset } = getOffset();
+      return {
+        background: `${props.color}`,
+        right: xOffset,
+        top: yOffset,
+      };
+    });
+    /** 样式计算相关逻辑 end */
+    return {
+      content,
+      inlineStyle,
+      badgeClassNames,
+      isHidden,
+      renderChildren,
+      name,
     };
+  },
 
+  render() {
     return (
-      <div class={name} {...this.$attrs}>
-        {children || null}
-        {isHidden ? null : (
-          <sup class={badgeClassNames} style={inlineStyle}>
-            {content}
+      <div class={this.name} {...this.$attrs}>
+        {this.renderChildren()}
+        {this.isHidden ? null : (
+          <sup class={this.badgeClassNames} style={this.inlineStyle}>
+            {this.content}
           </sup>
         )}
       </div>