From 35edb72b5cd519d4e75443acaa0a63db16695d2d Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 13 Apr 2021 21:02:14 +0800
Subject: [PATCH] feat(Badge): offset prop support custom unit

---
 src/badge/Badge.tsx          | 12 ++++++------
 src/badge/README.md          |  2 +-
 src/badge/README.zh-CN.md    |  2 +-
 src/badge/test/index.spec.ts | 16 ++++++++++++++++
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
index edee180de..df311b13f 100644
--- a/src/badge/Badge.tsx
+++ b/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.right = `${-x}px`;
+            style.top = addUnit(y);
+            style.right = `-${addUnit(x)}`;
           } else {
-            style.marginTop = `${y}px`;
-            style.marginLeft = `${x}px`;
+            style.marginTop = addUnit(y);
+            style.marginLeft = addUnit(x);
           }
         }
 
diff --git a/src/badge/README.md b/src/badge/README.md
index f5b6d9d9c..9b34ece3c 100644
--- a/src/badge/README.md
+++ b/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
diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md
index dc9baaea3..a4cc24a18 100644
--- a/src/badge/README.zh-CN.md
+++ b/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
diff --git a/src/badge/test/index.spec.ts b/src/badge/test/index.spec.ts
index 644c2107a..ece471578 100644
--- a/src/badge/test/index.spec.ts
+++ b/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: {