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

feat(Badge): offset prop support custom unit

Browse Source
This commit is contained in:
chenjiahan 2021-04-13 21:02:14 +08:00 committed by neverland
parent 2be579975a
commit 35edb72b5c
4 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/badge/Badge.tsx
View File

@ -1,5 +1,5 @@
import { PropType, CSSProperties, defineComponent } from 'vue';
import { isDef, isNumeric, createNamespace } from '../utils';
import { isDef, addUnit, isNumeric, createNamespace } from '../utils';
const [name, bem] = createNamespace('badge');
@ -10,7 +10,7 @@ export default defineComponent({
dot: Boolean,
max: [Number, String],
color: String,
offset: (Array as unknown) as PropType<[number, number]>,
offset: (Array as unknown) as PropType<[string | number, string | number]>,
content: [Number, String],
tag: {
type: String as PropType<keyof HTMLElementTagNameMap>,
@ -56,11 +56,11 @@ export default defineComponent({
if (props.offset) {
const [x, y] = props.offset;
if (slots.default) {
style.top = `${y}px`;
style.right = `${-x}px`;
style.top = addUnit(y);
style.right = `-${addUnit(x)}`;
} else {
style.marginTop = `${y}px`;
style.marginLeft = `${x}px`;
style.marginTop = addUnit(y);
style.marginLeft = addUnit(x);
}
}

2
src/badge/README.md
View File

@ -123,7 +123,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]_ | - |
| 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` |
### Slots

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

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

16
src/badge/test/index.spec.ts
View File

@ -57,6 +57,22 @@ test('should change dot position when using offset prop', () => {
expect(badge.style.right).toEqual('-2px');
});
test('should change dot position when using offset prop with custom unit', () => {
const wrapper = mount(Badge, {
props: {
dot: true,
offset: ['2rem', '4em'],
},
slots: {
default: () => 'Child',
},
});
const badge = wrapper.find('.van-badge');
expect(badge.style.top).toEqual('4em');
expect(badge.style.right).toEqual('-2rem');
});
test('should change dot position when using offset prop without children', () => {
const wrapper = mount(Badge, {
props: {