init

uni_modules/nutui-uni/components/row/index.scss

@@ -0,0 +1,68 @@
+.nut-row {
+  width: 100%;
+
+  &::after {
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+    content: "";
+  }
+
+  &-flex {
+    display: flex;
+
+    &::after {
+      display: none;
+    }
+
+    .nut-col {
+      float: none;
+    }
+  }
+
+  &-justify-center {
+    justify-content: center;
+  }
+
+  &-justify-end {
+    justify-content: flex-end;
+  }
+
+  &-justify-space-between {
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &-justify-space-around {
+    justify-content: space-around;
+  }
+
+  &-justify-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  &-align-flex-start {
+    align-items: flex-start;
+  }
+
+  &-align-center {
+    align-items: center;
+  }
+
+  &-align-flex-end {
+    align-items: flex-end;
+  }
+
+  &-flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  &-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &-flex-reverse {
+    flex-wrap: wrap-reverse;
+  }
+}

uni_modules/nutui-uni/components/row/index.ts

@@ -0,0 +1 @@
+export * from './row'

uni_modules/nutui-uni/components/row/row.ts

@@ -0,0 +1,28 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumericProp, makeStringProp } from '../_utils'
+
+export const rowProps = {
+  ...commonProps,
+  /**
+   * @description 布局方式，可选值为 `flex`
+   */
+  type: makeStringProp<'flex' | ''>(''),
+  /**
+   * @description 列元素之间的间距（单位为 `px`）
+   */
+  gutter: makeNumericProp(''),
+  /**
+   * @description `Flex` 主轴对齐方式，可选值为 `start` `end` `center` `space-around` `space-between` `space-evenly`
+   */
+  justify: makeStringProp<'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'>('start'),
+  /**
+   * @description `Flex` 交叉轴对齐方式，可选值为 `flex-start` `center` `flex-end`
+   */
+  align: makeStringProp<'flex-start' | 'center' | 'flex-end'>('flex-start'),
+  /**
+   * @description `Flex` 是否换行，可选值为 `nowrap` `wrap` `reverse`
+   */
+  flexWrap: makeStringProp<'nowrap' | 'wrap' | 'reverse'>('nowrap'),
+}
+
+export type RowProps = ExtractPropTypes<typeof rowProps>

uni_modules/nutui-uni/components/row/row.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, defineComponent, provide } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { rowProps } from './row'
+
+const props = defineProps(rowProps)
+
+provide('gutter', props.gutter)
+function getClass(prefix: string, type: string) {
+  return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`
+}
+const classes = computed(() => {
+  return getMainClass(props, componentName, [
+    getClass('', props.type),
+    getClass('justify', props.justify),
+    getClass('align', props.align),
+    getClass('flex', props.flexWrap),
+  ])
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-row`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>