init

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

@@ -0,0 +1,49 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumericProp, makeStringProp, truthProp } from '../_utils'
+
+export const GRID_KEY = Symbol('grid')
+
+export const gridProps = {
+  ...commonProps,
+  /**
+   * @description 列数
+   */
+  columnNum: makeNumericProp(4),
+
+  /**
+   * @description 是否显示边框
+   */
+  border: truthProp,
+
+  /**
+   * @description 格子之间的间距，默认单位为 `px`
+   */
+  gutter: makeNumericProp(0),
+
+  /**
+   * @description 是否将格子内容居中显示
+   */
+  center: truthProp,
+
+  /**
+   * @description 是否将格子固定为正方形
+   */
+  square: Boolean,
+
+  /**
+   * @description 内容翻转
+   */
+  reverse: Boolean,
+
+  /**
+   * @description 格子内容排列的方向，可选值为 `horizontal`
+   */
+  direction: makeStringProp<'horizontal' | 'vertical'>('vertical'),
+
+  /**
+   * @description 是否开启格子点击反馈
+   */
+  clickable: Boolean,
+}
+
+export type GridProps = ExtractPropTypes<typeof gridProps>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { useProvide } from '../_hooks'
+import { getMainClass, getMainStyle, pxCheck } from '../_utils'
+import { GRID_KEY, gridProps } from './grid'
+
+const props = defineProps(gridProps)
+
+const componentName = `${PREFIX}-grid`
+
+useProvide(GRID_KEY, `${componentName}-item`)({ props })
+
+const classes = computed(() => {
+  return getMainClass(props, componentName, {
+    [`${componentName}--border`]: props.border && !props.gutter,
+  })
+})
+
+const styles = computed(() => {
+  const style: CSSProperties = {}
+  if (props.gutter)
+    style.paddingLeft = pxCheck(props.gutter)
+
+  return getMainStyle(props, style)
+})
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'NutGrid',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="styles">
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

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

@@ -0,0 +1,20 @@
+.nut-theme-dark {
+  .nut-grid {
+    display: flex;
+    flex-wrap: wrap;
+    border: 0 solid $dark-background;
+  }
+}
+
+
+
+.nut-grid {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0 solid $grid-border-color;
+
+  &--border {
+    border-top-width: 1px;
+    border-left-width: 1px;
+  }
+}

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

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