diff --git a/packages/vant/src/col/test/index.spec.tsx b/packages/vant/src/col/test/index.spec.tsx
index 4ac581e8f..dcc6edd14 100644
--- a/packages/vant/src/col/test/index.spec.tsx
+++ b/packages/vant/src/col/test/index.spec.tsx
@@ -1,6 +1,7 @@
import { Col } from '..';
import { Row } from '../../row';
import { mount } from '../../../test';
+import { nextTick } from 'vue';
test('should render Col correctly', () => {
const wrapper = mount(Col, {
@@ -41,3 +42,77 @@ test('should render gutter correctly', () => {
expect(wrapper.html()).toMatchSnapshot();
});
+
+test('should render vertical space when gutter is an array and provide the second parameter', async () => {
+ const wrapper = mount({
+ render: () => (
+
+ 12
+ 12
+ 12
+ 12
+
+ ),
+ });
+
+ const fields = wrapper.findAll('.van-col');
+ await nextTick();
+ expect(fields[0].style.marginBottom).toEqual('20px');
+ expect(fields[1].style.marginBottom).toEqual('20px');
+ expect(fields[2].style.marginBottom).toBeFalsy();
+ expect(fields[3].style.marginBottom).toBeFalsy();
+});
+
+test('should not render vertical space when gutter is an array and provide the second parameter as negative number', async () => {
+ const wrapper = mount({
+ render: () => (
+
+ 12
+ 12
+ 12
+ 12
+
+ ),
+ });
+
+ const fields = wrapper.findAll('.van-col');
+ await nextTick();
+ fields.forEach((field) => {
+ expect(field.style.marginBottom).toBeFalsy();
+ });
+});
+
+test('should not render space when gutter is an empty array', async () => {
+ const wrapper = mount({
+ render: () => (
+
+ 12
+ 12
+ 12
+ 12
+
+ ),
+ });
+
+ const field = wrapper.findAll('.van-col')[0];
+ await nextTick();
+ expect(field.style.paddingRight).toBeFalsy();
+ expect(field.style.marginBottom).toBeFalsy();
+});
+
+test('should not render vertical space when gutter is an array and provide the second parameter as invalid number', async () => {
+ const wrapper = mount({
+ render: () => (
+
+ 12
+ 12
+ 12
+ 12
+
+ ),
+ });
+
+ const field = wrapper.findAll('.van-col')[0];
+ await nextTick();
+ expect(field.style.marginBottom).toBeFalsy();
+});
diff --git a/packages/vant/src/row/Row.tsx b/packages/vant/src/row/Row.tsx
index b8e3b2adb..4982b9fef 100644
--- a/packages/vant/src/row/Row.tsx
+++ b/packages/vant/src/row/Row.tsx
@@ -6,20 +6,17 @@ import {
type InjectionKey,
type ExtractPropTypes,
} from 'vue';
-import {
- truthProp,
- makeStringProp,
- makeNumericProp,
- createNamespace,
-} from '../utils';
+import { truthProp, makeStringProp, createNamespace } from '../utils';
import { useChildren } from '@vant/use';
const [name, bem] = createNamespace('row');
export type RowSpaces = { left?: number; right: number }[];
+export type VerticalSpaces = { bottom?: number }[];
export type RowProvide = {
spaces: ComputedRef;
+ verticalSpaces: ComputedRef;
};
export const ROW_KEY: InjectionKey = Symbol(name);
@@ -37,7 +34,12 @@ export const rowProps = {
tag: makeStringProp('div'),
wrap: truthProp,
align: String as PropType,
- gutter: makeNumericProp(0),
+ gutter: {
+ type: [String, Number, Array] as PropType<
+ string | number | (string | number)[]
+ >,
+ default: 0,
+ },
justify: String as PropType,
};
@@ -70,7 +72,12 @@ export default defineComponent({
});
const spaces = computed(() => {
- const gutter = Number(props.gutter);
+ let gutter = 0;
+ if (Array.isArray(props.gutter)) {
+ gutter = Number(props.gutter[0]) || 0;
+ } else {
+ gutter = Number(props.gutter);
+ }
const spaces: RowSpaces = [];
if (!gutter) {
@@ -94,7 +101,25 @@ export default defineComponent({
return spaces;
});
- linkChildren({ spaces });
+ const verticalSpaces = computed(() => {
+ const { gutter } = props;
+ const spaces: VerticalSpaces = [];
+ if (Array.isArray(gutter) && gutter.length > 1) {
+ const bottom = Number(gutter[1]) || 0;
+ if (bottom <= 0) {
+ return spaces;
+ }
+ groups.value.forEach((group, index) => {
+ if (index === groups.value.length - 1) return;
+ group.forEach(() => {
+ spaces.push({ bottom });
+ });
+ });
+ }
+ return spaces;
+ });
+
+ linkChildren({ spaces, verticalSpaces });
return () => {
const { tag, wrap, align, justify } = props;