feat(Badge): add offset prop (#7977)

src/badge/README.md

@@ -117,6 +117,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]_ | - |
 
 ### Slots
 

src/badge/README.zh-CN.md

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

src/badge/index.tsx

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue';
+import type { PropType, CSSProperties } from 'vue';
 import { isDef, createNamespace } from '../utils';
 import { isNumeric } from '../utils/validate/number';
 
@@ -9,6 +9,7 @@ export default createComponent({
     dot: Boolean,
     max: [Number, String],
     color: String,
+    offset: (Array as unknown) as PropType<[number, number]>,
     content: [Number, String],
     tag: {
       type: String as PropType<keyof HTMLElementTagNameMap>,
@@ -38,10 +39,25 @@ export default createComponent({
 
     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 = `${y}px`;
+            style.right = `${-x}px`;
+          } else {
+            style.marginTop = `${y}px`;
+            style.marginLeft = `${x}px`;
+          }
+        }
+
         return (
           <div
             class={bem({ dot: props.dot, fixed: !!slots.default })}
-            style={{ background: props.color }}
+            style={style}
           >
             {renderContent()}
           </div>

src/badge/test/index.spec.js

@@ -40,3 +40,32 @@ test('should render content slot correctly', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should change dot position when using offset prop', () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: [2, 4],
+    },
+    slots: {
+      default: () => 'Child',
+    },
+  });
+
+  const badge = wrapper.find('.van-badge').element;
+  expect(badge.style.top).toEqual('4px');
+  expect(badge.style.right).toEqual('-2px');
+});
+
+test('should change dot position when using offset prop without children', () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: [2, 4],
+    },
+  });
+
+  const badge = wrapper.find('.van-badge').element;
+  expect(badge.style.marginTop).toEqual('4px');
+  expect(badge.style.marginLeft).toEqual('2px');
+});