From ae11580b0fd16e06a299a57d867be8e14fc07eb7 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 10 Dec 2021 21:08:50 +0800 Subject: [PATCH] feat(Badge): add position prop (#10024) --- .../test/__snapshots__/index.spec.ts.snap | 4 +- .../test/__snapshots__/demo.spec.ts.snap | 6 +-- packages/vant/src/badge/Badge.tsx | 12 ++++- packages/vant/src/badge/README.md | 21 +++++++- packages/vant/src/badge/README.zh-CN.md | 19 ++++++- packages/vant/src/badge/demo/index.vue | 14 +++++ packages/vant/src/badge/index.less | 23 +++++++- packages/vant/src/badge/index.ts | 2 +- .../test/__snapshots__/demo.spec.ts.snap | 53 +++++++++++++------ .../test/__snapshots__/index.spec.ts.snap | 4 +- .../grid/test/__snapshots__/demo.spec.ts.snap | 4 +- .../test/__snapshots__/index.spec.js.snap | 2 +- .../icon/test/__snapshots__/demo.spec.ts.snap | 6 +-- .../test/__snapshots__/index.spec.js.snap | 4 +- .../test/__snapshots__/demo.spec.ts.snap | 6 +-- .../test/__snapshots__/index.spec.tsx.snap | 2 +- .../test/__snapshots__/demo.spec.ts.snap | 8 +-- .../test/__snapshots__/demo.spec.ts.snap | 4 +- .../test/__snapshots__/index.spec.tsx.snap | 2 +- 19 files changed, 149 insertions(+), 47 deletions(-) diff --git a/packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap index 9c6c7f696..328419215 100644 --- a/packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap +++ b/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`] = ` >
Custom Icon -
+
1
@@ -45,7 +45,7 @@ exports[`should render icon slot with dot correctly 1`] = ` >
Custom Icon -
+
Content diff --git a/packages/vant/src/action-bar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/action-bar/test/__snapshots__/demo.spec.ts.snap index 4f0f8f701..41dd9e613 100644 --- a/packages/vant/src/action-bar/test/__snapshots__/demo.spec.ts.snap +++ b/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" >
-
+
Icon1 @@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = ` tabindex="0" >
-
+
5
@@ -66,7 +66,7 @@ exports[`should render demo and match snapshot 1`] = ` tabindex="0" >
-
+
12
diff --git a/packages/vant/src/badge/Badge.tsx b/packages/vant/src/badge/Badge.tsx index 95d087869..4057fa14a 100644 --- a/packages/vant/src/badge/Badge.tsx +++ b/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('top-right'), }; export type BadgeProps = ExtractPropTypes; @@ -87,7 +94,10 @@ export default defineComponent({ if (hasContent() || props.dot) { return (
{renderContent()} diff --git a/packages/vant/src/badge/README.md b/packages/vant/src/badge/README.md index f6a5c19c0..a1f33c571 100644 --- a/packages/vant/src/badge/README.md +++ b/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 @@ -105,6 +105,22 @@ Use `content` slot to custom :content of badge. } ``` +### Custom Position + +Use `position` prop to set the position of badge. + +```html + +
+ + +
+ + +
+ +``` + ### 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 diff --git a/packages/vant/src/badge/README.zh-CN.md b/packages/vant/src/badge/README.zh-CN.md index 9b21a0069..e29637229 100644 --- a/packages/vant/src/badge/README.zh-CN.md +++ b/packages/vant/src/badge/README.zh-CN.md @@ -111,6 +111,22 @@ app.use(Badge); } ``` +### 自定义徽标位置 + +通过 `position` 属性来设置徽标的位置。 + +```html + +
+ + +
+ + +
+ +``` + ### 独立展示 当 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'; ``` ## 主题定制 diff --git a/packages/vant/src/badge/demo/index.vue b/packages/vant/src/badge/demo/index.vue index 9b6c501a0..c8c06d735 100644 --- a/packages/vant/src/badge/demo/index.vue +++ b/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', }, }); @@ -80,6 +82,18 @@ const t = useTranslate({ + + +
+ + +
+ + +
+ + + diff --git a/packages/vant/src/badge/index.less b/packages/vant/src/badge/index.less index db4431156..270ab34c2 100644 --- a/packages/vant/src/badge/index.less +++ b/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 { diff --git a/packages/vant/src/badge/index.ts b/packages/vant/src/badge/index.ts index b8590dca0..3588b6e7d 100644 --- a/packages/vant/src/badge/index.ts +++ b/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'; diff --git a/packages/vant/src/badge/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/badge/test/__snapshots__/demo.spec.ts.snap index b2109b53e..de1980aef 100644 --- a/packages/vant/src/badge/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/badge/test/__snapshots__/demo.spec.ts.snap @@ -5,28 +5,28 @@ exports[`should render demo and match snapshot 1`] = `
-
+
5
-
+
10
-
+
Hot
-
+
@@ -34,21 +34,21 @@ exports[`should render demo and match snapshot 1`] = `
-
+
9+
-
+
20+
-
+
99+
@@ -57,7 +57,7 @@ exports[`should render demo and match snapshot 1`] = `
-
5 @@ -66,7 +66,7 @@ exports[`should render demo and match snapshot 1`] = `
-
10 @@ -75,7 +75,7 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -85,7 +85,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
@@ -93,7 +93,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
@@ -101,19 +101,42 @@ exports[`should render demo and match snapshot 1`] = `
-
+
-
+
+
+
+ 10 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 10 +
+
+
+
+
20
-
99+ diff --git a/packages/vant/src/badge/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/badge/test/__snapshots__/index.spec.ts.snap index 8e52fe049..8b978ac3b 100644 --- a/packages/vant/src/badge/test/__snapshots__/index.spec.ts.snap +++ b/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`] = ` -
+
Custom Content
`; @@ -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`] = ` -
+
0
`; diff --git a/packages/vant/src/grid/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/grid/test/__snapshots__/demo.spec.ts.snap index f2a4ab92a..a9807a062 100644 --- a/packages/vant/src/grid/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/grid/test/__snapshots__/demo.spec.ts.snap @@ -433,7 +433,7 @@ exports[`should render demo and match snapshot 1`] = ` >
-
+
@@ -446,7 +446,7 @@ exports[`should render demo and match snapshot 1`] = ` >
-
+
99+
diff --git a/packages/vant/src/grid/test/__snapshots__/index.spec.js.snap b/packages/vant/src/grid/test/__snapshots__/index.spec.js.snap index e24978336..92931e130 100644 --- a/packages/vant/src/grid/test/__snapshots__/index.spec.js.snap +++ b/packages/vant/src/grid/test/__snapshots__/index.spec.js.snap @@ -8,7 +8,7 @@ exports[`should render icon-slot correctly 1`] = `
Custom Icon -
+
1
diff --git a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap index 14bdd363e..c5e93436a 100644 --- a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap @@ -88,20 +88,20 @@ exports[`should render demo and match snapshot 1`] = `
-
+
-
+
9
-
+
99+
diff --git a/packages/vant/src/icon/test/__snapshots__/index.spec.js.snap b/packages/vant/src/icon/test/__snapshots__/index.spec.js.snap index 269142d25..90a603fd9 100644 --- a/packages/vant/src/icon/test/__snapshots__/index.spec.js.snap +++ b/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`] = ` -
+
1
`; @@ -13,7 +13,7 @@ exports[`should render default slot correctly 1`] = ` `; exports[`should render dot correctly 1`] = ` -
+
`; diff --git a/packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap index 905f6f890..fd4eae9c4 100644 --- a/packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap @@ -59,7 +59,7 @@ exports[`should render demo and match snapshot 1`] = ` >
Title -
+
@@ -70,7 +70,7 @@ exports[`should render demo and match snapshot 1`] = ` >
Title -
+
5
@@ -82,7 +82,7 @@ exports[`should render demo and match snapshot 1`] = ` >
Title -
+
20
diff --git a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap index 575fa0d20..6a0859c70 100644 --- a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap +++ b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap @@ -160,7 +160,7 @@ exports[`should render badge prop correctly 1`] = `
-
+
10
diff --git a/packages/vant/src/tabbar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tabbar/test/__snapshots__/demo.spec.ts.snap index c83305b23..f2264cb4d 100644 --- a/packages/vant/src/tabbar/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/tabbar/test/__snapshots__/demo.spec.ts.snap @@ -142,7 +142,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
@@ -157,7 +157,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
5
@@ -173,7 +173,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
20
@@ -194,7 +194,7 @@ exports[`should render demo and match snapshot 1`] = ` >
-
+
3
diff --git a/packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap index 35bc23628..0aa04278a 100644 --- a/packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap @@ -156,7 +156,7 @@ exports[`should render demo and match snapshot 1`] = ` >
Group 1 -
+
@@ -167,7 +167,7 @@ exports[`should render demo and match snapshot 1`] = ` >
Group 2 -
+
5
diff --git a/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap index 1d4680079..8dc254c41 100644 --- a/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap +++ b/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap @@ -58,7 +58,7 @@ exports[`should render nav badge correctly 1`] = ` >
group1 -
+
3