From 86f669228458a18cde52975e282f6e03340bae31 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 7 Aug 2021 15:52:25 +0800
Subject: [PATCH] fix(Badge): minus x offset not work (#9199)

---
 src/badge/Badge.tsx          | 43 ++++++++++++++++++++++--------------
 src/badge/test/index.spec.ts | 16 ++++++++++++--
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
index a4fe43110..d0c8bd02b 100644
--- a/src/badge/Badge.tsx
+++ b/src/badge/Badge.tsx
@@ -1,4 +1,4 @@
-import { PropType, CSSProperties, defineComponent } from 'vue';
+import { PropType, CSSProperties, defineComponent, computed } from 'vue';
 import {
   isDef,
   addUnit,
@@ -50,27 +50,36 @@ export default defineComponent({
       }
     };
 
+    const style = computed(() => {
+      const style: CSSProperties = {
+        background: props.color,
+      };
+
+      if (props.offset) {
+        const [x, y] = props.offset;
+        if (slots.default) {
+          style.top = addUnit(y);
+
+          if (typeof x === 'number') {
+            style.right = addUnit(-x);
+          } else {
+            style.right = x.startsWith('-') ? x.replace('-', '') : `-${x}`;
+          }
+        } else {
+          style.marginTop = addUnit(y);
+          style.marginLeft = addUnit(x);
+        }
+      }
+
+      return style;
+    });
+
     const renderBadge = () => {
       if (hasContent() || props.dot) {
-        const style: CSSProperties = {
-          background: props.color,
-        };
-
-        if (props.offset) {
-          const [x, y] = props.offset;
-          if (slots.default) {
-            style.top = addUnit(y);
-            style.right = `-${addUnit(x)}`;
-          } else {
-            style.marginTop = addUnit(y);
-            style.marginLeft = addUnit(x);
-          }
-        }
-
         return (
           <div
             class={bem({ dot: props.dot, fixed: !!slots.default })}
-            style={style}
+            style={style.value}
           >
             {renderContent()}
           </div>
diff --git a/src/badge/test/index.spec.ts b/src/badge/test/index.spec.ts
index ece471578..2144d9b40 100644
--- a/src/badge/test/index.spec.ts
+++ b/src/badge/test/index.spec.ts
@@ -41,7 +41,7 @@ test('should render content slot correctly', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should change dot position when using offset prop', () => {
+test('should change dot position when using offset prop', async () => {
   const wrapper = mount(Badge, {
     props: {
       dot: true,
@@ -55,9 +55,15 @@ test('should change dot position when using offset prop', () => {
   const badge = wrapper.find('.van-badge');
   expect(badge.style.top).toEqual('4px');
   expect(badge.style.right).toEqual('-2px');
+
+  await wrapper.setProps({
+    offset: [-2, -4],
+  });
+  expect(badge.style.top).toEqual('-4px');
+  expect(badge.style.right).toEqual('2px');
 });
 
-test('should change dot position when using offset prop with custom unit', () => {
+test('should change dot position when using offset prop with custom unit', async () => {
   const wrapper = mount(Badge, {
     props: {
       dot: true,
@@ -71,6 +77,12 @@ test('should change dot position when using offset prop with custom unit', () =>
   const badge = wrapper.find('.van-badge');
   expect(badge.style.top).toEqual('4em');
   expect(badge.style.right).toEqual('-2rem');
+
+  await wrapper.setProps({
+    offset: ['-2rem', '-4em'],
+  });
+  expect(badge.style.top).toEqual('-4em');
+  expect(badge.style.right).toEqual('2rem');
 });
 
 test('should change dot position when using offset prop without children', () => {