feat(Badge): add position prop (#10024)

packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap

@@ -30,7 +30,7 @@ exports[`should render icon slot with badge correctly 1`] = `
 >
   <div class="van-badge__wrapper van-action-bar-icon__icon">
     Custom Icon
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       1
     </div>
   </div>
@@ -45,7 +45,7 @@ exports[`should render icon slot with dot correctly 1`] = `
 >
   <div class="van-badge__wrapper van-action-bar-icon__icon">
     Custom Icon
-    <div class="van-badge van-badge--dot van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
     </div>
   </div>
   Content

packages/vant/src/action-bar/test/__snapshots__/demo.spec.ts.snap

@@ -45,7 +45,7 @@ exports[`should render demo and match snapshot 1`] = `
          tabindex="0"
     >
       <div class="van-badge__wrapper van-icon van-icon-chat-o van-action-bar-icon__icon">
-        <div class="van-badge van-badge--dot van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
         </div>
       </div>
       Icon1
@@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
          tabindex="0"
     >
       <div class="van-badge__wrapper van-icon van-icon-cart-o van-action-bar-icon__icon">
-        <div class="van-badge van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--fixed">
           5
         </div>
       </div>
@@ -66,7 +66,7 @@ exports[`should render demo and match snapshot 1`] = `
          tabindex="0"
     >
       <div class="van-badge__wrapper van-icon van-icon-shop-o van-action-bar-icon__icon">
-        <div class="van-badge van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--fixed">
           12
         </div>
       </div>

packages/vant/src/badge/Badge.tsx

@@ -17,6 +17,12 @@ import {
 
 const [name, bem] = createNamespace('badge');
 
+export type BadgePosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
 const badgeProps = {
   dot: Boolean,
   max: numericProp,
@@ -25,6 +31,7 @@ const badgeProps = {
   offset: Array as unknown as PropType<[string | number, string | number]>,
   content: numericProp,
   showZero: truthProp,
+  position: makeStringProp<BadgePosition>('top-right'),
 };
 
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>;
@@ -87,7 +94,10 @@ export default defineComponent({
       if (hasContent() || props.dot) {
         return (
           <div
-            class={bem({ dot: props.dot, fixed: !!slots.default })}
+            class={bem([
+              props.position,
+              { dot: props.dot, fixed: !!slots.default },
+            ])}
             style={style.value}
           >
             {renderContent()}

packages/vant/src/badge/README.md

@@ -74,7 +74,7 @@ app.use(Badge);
 
 ### Custom Content
 
-Use `content` slot to custom :content of badge.
+Use `content` slot to custom the content of badge.
 
 ```html
 <van-badge>
@@ -105,6 +105,22 @@ Use `content` slot to custom :content of badge.
 }
 ```
 
+### Custom Position
+
+Use `position` prop to set the position of badge.
+
+```html
+<van-badge :content="10" position="top-left">
+  <div class="child" />
+</van-badge>
+<van-badge :content="10" position="bottom-left">
+  <div class="child" />
+</van-badge>
+<van-badge :content="10" position="bottom-right">
+  <div class="child" />
+</van-badge>
+```
+
 ### Standalone
 
 ```html
@@ -125,6 +141,7 @@ Use `content` slot to custom :content of badge.
 | max | Max value，show `{max}+` when exceed，only works when content is number | _number \| string_ | - |
 | 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` |
+| position `v3.2.7` | Badge position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 
 ### Slots
 
@@ -138,7 +155,7 @@ Use `content` slot to custom :content of badge.
 The component exports the following type definitions:
 
 ```ts
-import type { BadgeProps } from 'vant';
+import type { BadgeProps, BadgePosition } from 'vant';
 ```
 
 ## Theming

packages/vant/src/badge/README.zh-CN.md

@@ -111,6 +111,22 @@ app.use(Badge);
 }
 ```
 
+### 自定义徽标位置
+
+通过 `position` 属性来设置徽标的位置。
+
+```html
+<van-badge :content="10" position="top-left">
+  <div class="child" />
+</van-badge>
+<van-badge :content="10" position="bottom-left">
+  <div class="child" />
+</van-badge>
+<van-badge :content="10" position="bottom-right">
+  <div class="child" />
+</van-badge>
+```
+
 ### 独立展示
 
 当 Badge 没有子元素时，会作为一个独立的元素进行展示。
@@ -133,6 +149,7 @@ app.use(Badge);
 | max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
 | offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
 | show-zero `v3.0.10` | 当 content 为数字 0 时，是否展示徽标 | _boolean_ | `true` |
+| position `v3.2.7` | 徽标位置，可选值为 `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 
 ### Slots
 
@@ -146,7 +163,7 @@ app.use(Badge);
 组件导出以下类型定义：
 
 ```ts
-import type { BadgeProps } from 'vant';
+import type { BadgeProps, BadgePosition } from 'vant';
 ```
 
 ## 主题定制

packages/vant/src/badge/demo/index.vue

@@ -9,12 +9,14 @@ const t = useTranslate({
     standalone: '独立展示',
     customColor: '自定义颜色',
     customContent: '自定义徽标内容',
+    customPosition: '自定义徽标位置',
   },
   'en-US': {
     max: 'Max',
     standalone: 'Standalone',
     customColor: 'Custom Color',
     customContent: 'Custom Content',
+    customPosition: 'Custom Position',
   },
 });
 </script>
@@ -80,6 +82,18 @@ const t = useTranslate({
     </van-badge>
   </demo-block>
 
+  <demo-block :title="t('customPosition')">
+    <van-badge content="10" position="top-left">
+      <div class="child" />
+    </van-badge>
+    <van-badge content="10" position="bottom-left">
+      <div class="child" />
+    </van-badge>
+    <van-badge content="10" position="bottom-right">
+      <div class="child" />
+    </van-badge>
+  </demo-block>
+
   <demo-block :title="t('standalone')">
     <van-badge content="20" style="margin-left: 16px" />
     <van-badge content="200" max="99" style="margin-left: 16px" />

packages/vant/src/badge/index.less

@@ -30,10 +30,31 @@
 
   &--fixed {
     position: absolute;
+    transform-origin: 100%;
+  }
+
+  &--top-left {
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  &--top-right {
     top: 0;
     right: 0;
     transform: translate(50%, -50%);
-    transform-origin: 100%;
+  }
+
+  &--bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, 50%);
+  }
+
+  &--bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: translate(50%, 50%);
   }
 
   &--dot {

packages/vant/src/badge/index.ts

@@ -3,4 +3,4 @@ import _Badge from './Badge';
 
 export const Badge = withInstall(_Badge);
 export default Badge;
-export type { BadgeProps } from './Badge';
+export type { BadgeProps, BadgePosition } from './Badge';

packages/vant/src/badge/test/__snapshots__/demo.spec.ts.snap

@@ -5,28 +5,28 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       5
     </div>
   </div>
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       10
     </div>
   </div>
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       Hot
     </div>
   </div>
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--dot van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
     </div>
   </div>
 </div>
@@ -34,21 +34,21 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       9+
     </div>
   </div>
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       20+
     </div>
   </div>
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       99+
     </div>
   </div>
@@ -57,7 +57,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed"
+    <div class="van-badge van-badge--top-right van-badge--fixed"
          style="background: rgb(25, 137, 250);"
     >
       5
@@ -66,7 +66,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed"
+    <div class="van-badge van-badge--top-right van-badge--fixed"
          style="background: rgb(25, 137, 250);"
     >
       10
@@ -75,7 +75,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--dot van-badge--fixed"
+    <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed"
          style="background: rgb(25, 137, 250);"
     >
     </div>
@@ -85,7 +85,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       <i class="van-badge__wrapper van-icon van-icon-success badge-icon">
       </i>
     </div>
@@ -93,7 +93,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       <i class="van-badge__wrapper van-icon van-icon-cross badge-icon">
       </i>
     </div>
@@ -101,19 +101,42 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       <i class="van-badge__wrapper van-icon van-icon-down badge-icon">
       </i>
     </div>
   </div>
 </div>
 <div>
-  <div class="van-badge"
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--top-left van-badge--fixed">
+      10
+    </div>
+  </div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--bottom-left van-badge--fixed">
+      10
+    </div>
+  </div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--bottom-right van-badge--fixed">
+      10
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-badge van-badge--top-right"
        style="margin-left: 16px;"
   >
     20
   </div>
-  <div class="van-badge"
+  <div class="van-badge van-badge--top-right"
        style="margin-left: 16px;"
   >
     99+

packages/vant/src/badge/test/__snapshots__/index.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render content slot correctly 1`] = `
-<div class="van-badge">
+<div class="van-badge van-badge--top-right">
   Custom Content
 </div>
 `;
@@ -11,7 +11,7 @@ exports[`should render nothing when content is empty string 1`] = ``;
 exports[`should render nothing when content is undefined 1`] = ``;
 
 exports[`should render nothing when content is zero 1`] = `
-<div class="van-badge">
+<div class="van-badge van-badge--top-right">
   0
 </div>
 `;

packages/vant/src/grid/test/__snapshots__/demo.spec.ts.snap

@@ -433,7 +433,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div class="van-grid-item__content van-grid-item__content--center van-hairline">
         <i class="van-badge__wrapper van-icon van-icon-home-o van-grid-item__icon">
-          <div class="van-badge van-badge--dot van-badge--fixed">
+          <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
           </div>
         </i>
         <span class="van-grid-item__text">
@@ -446,7 +446,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div class="van-grid-item__content van-grid-item__content--center van-hairline">
         <i class="van-badge__wrapper van-icon van-icon-search van-grid-item__icon">
-          <div class="van-badge van-badge--fixed">
+          <div class="van-badge van-badge--top-right van-badge--fixed">
             99+
           </div>
         </i>

packages/vant/src/grid/test/__snapshots__/index.spec.js.snap

@@ -8,7 +8,7 @@ exports[`should render icon-slot correctly 1`] = `
     <div class="van-grid-item__content van-grid-item__content--center van-hairline">
       <div class="van-badge__wrapper">
         Custom Icon
-        <div class="van-badge van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--fixed">
           1
         </div>
       </div>

packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap

@@ -88,20 +88,20 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-row">
           <div class="van-col van-col--6">
             <i class="van-badge__wrapper van-icon van-icon-chat-o">
-              <div class="van-badge van-badge--dot van-badge--fixed">
+              <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
               </div>
             </i>
           </div>
           <div class="van-col van-col--6">
             <i class="van-badge__wrapper van-icon van-icon-chat-o">
-              <div class="van-badge van-badge--fixed">
+              <div class="van-badge van-badge--top-right van-badge--fixed">
                 9
               </div>
             </i>
           </div>
           <div class="van-col van-col--6">
             <i class="van-badge__wrapper van-icon van-icon-chat-o">
-              <div class="van-badge van-badge--fixed">
+              <div class="van-badge van-badge--top-right van-badge--fixed">
                 99+
               </div>
             </i>

packages/vant/src/icon/test/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render badge correctly 1`] = `
-<div class="van-badge van-badge--fixed">
+<div class="van-badge van-badge--top-right van-badge--fixed">
   1
 </div>
 `;
@@ -13,7 +13,7 @@ exports[`should render default slot correctly 1`] = `
 `;
 
 exports[`should render dot correctly 1`] = `
-<div class="van-badge van-badge--dot van-badge--fixed">
+<div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
 </div>
 `;
 

packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap

@@ -59,7 +59,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
-            <div class="van-badge van-badge--dot van-badge--fixed">
+            <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
             </div>
           </div>
         </div>
@@ -70,7 +70,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
-            <div class="van-badge van-badge--fixed">
+            <div class="van-badge van-badge--top-right van-badge--fixed">
               5
             </div>
           </div>
@@ -82,7 +82,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
-            <div class="van-badge van-badge--fixed">
+            <div class="van-badge van-badge--top-right van-badge--fixed">
               20
             </div>
           </div>

packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap

@@ -160,7 +160,7 @@ exports[`should render badge prop correctly 1`] = `
   <div class="van-badge__wrapper">
     <span class="van-tab__text van-tab__text--ellipsis">
     </span>
-    <div class="van-badge van-badge--fixed">
+    <div class="van-badge van-badge--top-right van-badge--fixed">
       10
     </div>
   </div>

packages/vant/src/tabbar/test/__snapshots__/demo.spec.ts.snap

@@ -142,7 +142,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-search">
         </i>
-        <div class="van-badge van-badge--dot van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
         </div>
       </div>
       <div class="van-tabbar-item__text">
@@ -157,7 +157,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-friends-o">
         </i>
-        <div class="van-badge van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--fixed">
           5
         </div>
       </div>
@@ -173,7 +173,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-setting-o">
         </i>
-        <div class="van-badge van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--fixed">
           20
         </div>
       </div>
@@ -194,7 +194,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <img src="https://img.yzcdn.cn/vant/user-active.png">
-        <div class="van-badge van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--fixed">
           3
         </div>
       </div>

packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap

@@ -156,7 +156,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
-          <div class="van-badge van-badge--dot van-badge--fixed">
+          <div class="van-badge van-badge--top-right van-badge--dot van-badge--fixed">
           </div>
         </div>
       </div>
@@ -167,7 +167,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
-          <div class="van-badge van-badge--fixed">
+          <div class="van-badge van-badge--top-right van-badge--fixed">
             5
           </div>
         </div>

packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap

@@ -58,7 +58,7 @@ exports[`should render nav badge correctly 1`] = `
     >
       <div class="van-badge__wrapper van-sidebar-item__text">
         group1
-        <div class="van-badge van-badge--fixed">
+        <div class="van-badge van-badge--top-right van-badge--fixed">
           3
         </div>
       </div>