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 { import {
isDef, isDef,
addUnit, 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 = () => { const renderBadge = () => {
if (hasContent() || props.dot) { 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 ( return (
<div <div
class={bem({ dot: props.dot, fixed: !!slots.default })} class={bem({ dot: props.dot, fixed: !!slots.default })}
style={style} style={style.value}
> >
{renderContent()} {renderContent()}
</div> </div>

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

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