diff --git a/src/badge/README.md b/src/badge/README.md index fc72752f5..c442a3cba 100644 --- a/src/badge/README.md +++ b/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 diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md index 454bf8247..1b76865ac 100644 --- a/src/badge/README.zh-CN.md +++ b/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 diff --git a/src/badge/index.tsx b/src/badge/index.tsx index 596820199..7544f90cb 100644 --- a/src/badge/index.tsx +++ b/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, @@ -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 (
{renderContent()}
diff --git a/src/badge/test/index.spec.js b/src/badge/test/index.spec.js index 86984be2d..af105d21b 100644 --- a/src/badge/test/index.spec.js +++ b/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'); +});