feat(Row): add wrap prop (#8393)

src/col/README.md

@@ -91,6 +91,7 @@ Set grid spacing using `gutter` attribute. The default value is 0.
 | tag | Custom element tag | _string_ | `div` |
 | justify | Flex main axis，can be set to end/center/space-around/space-between | _string_ | `start` |
 | align | Flex cross axis, be set to center/bottom | _string_ | `top` |
+| wrap `v3.0.11` | Whether to wrap | _boolean_ | `true` |
 
 ### Col Props
 

src/col/README.zh-CN.md

@@ -96,6 +96,7 @@ Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性
 | tag | 自定义元素标签 | _string_ | `div` |
 | justify | 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
 | align | 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |
+| wrap `v3.0.11` | 是否自动换行 | _boolean_ | `true` |
 
 ### Col Props
 

src/row/Row.tsx

@@ -31,6 +31,10 @@ export default defineComponent({
       type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'div',
     },
+    wrap: {
+      type: Boolean,
+      default: true,
+    },
     gutter: {
       type: [Number, String],
       default: 0,
@@ -86,12 +90,13 @@ export default defineComponent({
     linkChildren({ spaces });
 
     return () => {
-      const { tag, align, justify } = props;
+      const { tag, wrap, align, justify } = props;
       return (
         <tag
           class={bem({
             [`align-${align}`]: align,
             [`justify-${justify}`]: justify,
+            nowrap: !wrap,
           })}
         >
           {slots.default?.()}

src/row/index.less

@@ -2,6 +2,10 @@
   display: flex;
   flex-wrap: wrap;
 
+  &--nowrap {
+    flex-wrap: nowrap;
+  }
+
   &--justify-center {
     justify-content: center;
   }

src/row/test/index.spec.ts

@@ -0,0 +1,11 @@
+import { Row } from '..';
+import { mount } from '../../../test';
+
+test('should add "van-row--nowrap" class when wrap prop is false', () => {
+  const wrapper = mount(Row, {
+    props: {
+      wrap: false,
+    },
+  });
+  expect(wrapper.classes()).toContain('van-row--nowrap');
+});