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

fix(Badge): minus x offset not work (#9199)

Browse Source
This commit is contained in:
neverland 2021-08-07 15:52:25 +08:00 committed by GitHub
parent 10c36c05c3
commit 86f6692284
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/badge/Badge.tsx
View File

@ -1,4 +1,4 @@
import { PropType, CSSProperties, defineComponent } from 'vue';
import { PropType, CSSProperties, defineComponent, computed } from 'vue';
import {
isDef,
addUnit,
@ -50,27 +50,36 @@ export default defineComponent({
}
};
const style = computed(() => {
const style: CSSProperties = {
background: props.color,
};
if (props.offset) {
const [x, y] = props.offset;
if (slots.default) {
style.top = addUnit(y);
if (typeof x === 'number') {
style.right = addUnit(-x);
} else {
style.right = x.startsWith('-') ? x.replace('-', '') : `-${x}`;
}
} else {
style.marginTop = addUnit(y);
style.marginLeft = addUnit(x);
}
}
return style;
});
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 = addUnit(y);
style.right = `-${addUnit(x)}`;
} else {
style.marginTop = addUnit(y);
style.marginLeft = addUnit(x);
}
}
return (
<div
class={bem({ dot: props.dot, fixed: !!slots.default })}
style={style}
style={style.value}
>
{renderContent()}
</div>

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

@ -41,7 +41,7 @@ test('should render content slot correctly', () => {
expect(wrapper.html()).toMatchSnapshot();
});
test('should change dot position when using offset prop', () => {
test('should change dot position when using offset prop', async () => {
const wrapper = mount(Badge, {
props: {
dot: true,
@ -55,9 +55,15 @@ test('should change dot position when using offset prop', () => {
const badge = wrapper.find('.van-badge');
expect(badge.style.top).toEqual('4px');
expect(badge.style.right).toEqual('-2px');
await wrapper.setProps({
offset: [-2, -4],
});
expect(badge.style.top).toEqual('-4px');
expect(badge.style.right).toEqual('2px');
});
test('should change dot position when using offset prop with custom unit', () => {
test('should change dot position when using offset prop with custom unit', async () => {
const wrapper = mount(Badge, {
props: {
dot: true,
@ -71,6 +77,12 @@ test('should change dot position when using offset prop with custom unit', () =>
const badge = wrapper.find('.van-badge');
expect(badge.style.top).toEqual('4em');
expect(badge.style.right).toEqual('-2rem');
await wrapper.setProps({
offset: ['-2rem', '-4em'],
});
expect(badge.style.top).toEqual('-4em');
expect(badge.style.right).toEqual('2rem');
});
test('should change dot position when using offset prop without children', () => {