feat(Badge): offset prop support custom unit

src/badge/Badge.tsx

@@ -1,5 +1,5 @@
 import { PropType, CSSProperties, defineComponent } from 'vue';
-import { isDef, isNumeric, createNamespace } from '../utils';
+import { isDef, addUnit, isNumeric, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('badge');
 
@@ -10,7 +10,7 @@ export default defineComponent({
     dot: Boolean,
     max: [Number, String],
     color: String,
-    offset: (Array as unknown) as PropType<[number, number]>,
+    offset: (Array as unknown) as PropType<[string | number, string | number]>,
     content: [Number, String],
     tag: {
       type: String as PropType<keyof HTMLElementTagNameMap>,
@@ -56,11 +56,11 @@ export default defineComponent({
         if (props.offset) {
           const [x, y] = props.offset;
           if (slots.default) {
-            style.top = `${y}px`;
+            style.top = addUnit(y);
-            style.right = `${-x}px`;
+            style.right = `-${addUnit(x)}`;
           } else {
-            style.marginTop = `${y}px`;
+            style.marginTop = addUnit(y);
-            style.marginLeft = `${x}px`;
+            style.marginLeft = addUnit(x);
           }
         }
 

src/badge/README.md

@@ -123,7 +123,7 @@ Use `content` slot to custom :content of badge.
 | color | Background color | _string_ | `#ee0a24` |
 | dot | Whether to show dot | _boolean_ | `false` |
 | max | Max value，show `{max}+` when exceed，only works when content is number | _number \| string_ | - |
-| offset `v3.0.5` | Offset of badge dot | _[number, number]_ | - |
+| offset `v3.0.5` | Offset of badge dot | _[number \| string, number \| string]_ | - |
 | show-zero `v3.0.10` | Whether to show badge when content is zero | _boolean_ | `true` |
 
 ### Slots

src/badge/README.zh-CN.md

@@ -131,7 +131,7 @@ app.use(Badge);
 | color | 徽标背景颜色 | _string_ | `#ee0a24` |
 | dot | 是否展示为小红点 | _boolean_ | `false` |
 | max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
-| offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量 | _[number, number]_ | - |
+| offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
 | show-zero `v3.0.10` | 当 content 为数字 0 时，是否展示徽标 | _boolean_ | `true` |
 
 ### Slots

src/badge/test/index.spec.ts

@@ -57,6 +57,22 @@ test('should change dot position when using offset prop', () => {
   expect(badge.style.right).toEqual('-2px');
 });
 
+test('should change dot position when using offset prop with custom unit', () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: ['2rem', '4em'],
+    },
+    slots: {
+      default: () => 'Child',
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.top).toEqual('4em');
+  expect(badge.style.right).toEqual('-2rem');
+});
+
 test('should change dot position when using offset prop without children', () => {
   const wrapper = mount(Badge, {
     props: {