blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore(Badge): add some test cases for offset prop (#11412)

Browse Source
This commit is contained in:
neverland 2022-12-24 15:33:58 +08:00 committed by GitHub
parent 78847b8375
commit 775d9539cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/vant/src/badge/Badge.tsx
View File

@ -82,8 +82,10 @@ export default defineComponent({
if (props.offset) {
const [x, y] = props.offset;
const { position } = props;
const offsetY = position.indexOf('top') > -1 ? 'top' : 'bottom';
const offsetX = position.indexOf('left') > -1 ? 'left' : 'right';
const [offsetY, offsetX] = position.split('-') as [
'top' | 'bottom',
'left' | 'right'
];
if (slots.default) {
if (typeof y === 'number') {

2
packages/vant/src/badge/README.md
View File

@ -139,7 +139,7 @@ Use `position` prop to set the position 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 \| string, number \| string]_ | - |
| offset `v3.0.5` | Offset of badge dot, the two items of the array correspond to the horizontal and vertical offsets | _[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` |

2
packages/vant/src/badge/README.zh-CN.md
View File

@ -147,7 +147,7 @@ app.use(Badge);
| color | 徽标背景颜色 | _string_ | `#ee0a24` |
| dot | 是否展示为小红点 | _boolean_ | `false` |
| max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
| offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
| offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平向右和垂直向下方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
| show-zero `v3.0.10` | 当 content 为数字 0 或字符串 '0' 时，是否展示徽标 | _boolean_ | `true` |
| position `v3.2.7` | 徽标位置，可选值为 `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |

51
packages/vant/src/badge/test/index.spec.ts
View File

@ -98,6 +98,57 @@ test('should change dot position when using offset prop without children', () =>
expect(badge.style.marginLeft).toEqual('2px');
});
test('should change dot position when using offset prop and position is bottom-right', async () => {
const wrapper = mount(Badge, {
props: {
dot: true,
offset: [2, '-4rem'],
position: 'bottom-right',
},
slots: {
default: () => 'Child',
},
});
const badge = wrapper.find('.van-badge');
expect(badge.style.bottom).toEqual('4rem');
expect(badge.style.right).toEqual('-2px');
});
test('should change dot position when using offset prop and position is bottom-left', async () => {
const wrapper = mount(Badge, {
props: {
dot: true,
offset: [2, '-4rem'],
position: 'bottom-left',
},
slots: {
default: () => 'Child',
},
});
const badge = wrapper.find('.van-badge');
expect(badge.style.bottom).toEqual('4rem');
expect(badge.style.left).toEqual('2px');
});
test('should change dot position when using offset prop and position is top-left', async () => {
const wrapper = mount(Badge, {
props: {
dot: true,
offset: [2, '-4rem'],
position: 'top-left',
},
slots: {
default: () => 'Child',
},
});
const badge = wrapper.find('.van-badge');
expect(badge.style.top).toEqual('-4rem');
expect(badge.style.left).toEqual('2px');
});
test('should not render zero when show-zero is false', async () => {
const wrapper = mount(Badge, {
props: {