Grid 网格

代码演示

基础用法

<script setup></script>

<template>
  <x-grid
    :columns="4"
    :gutter="12"
  >
    <x-grid-item>
      <div class="light-green" />
    </x-grid-item>
    <x-grid-item>
      <div class="green" />
    </x-grid-item>
    <x-grid-item>
      <div class="light-green" />
    </x-grid-item>
    <x-grid-item>
      <div class="green" />
    </x-grid-item>
  </x-grid>
</template>

<style lang="less" scoped>
.light-green {
  height: 108px;
  background-color: #e6f4ff;
}

.green {
  height: 108px;
  background-color: #bae0ff;
}
</style>

间隔

<script setup></script>

<template>
  <x-grid
    :columns="4"
    :gutter="[12, 8]"
  >
    <x-grid-item>
      <div class="light-green" />
    </x-grid-item>
    <x-grid-item>
      <div class="green" />
    </x-grid-item>
    <x-grid-item>
      <div class="light-green" />
    </x-grid-item>
    <x-grid-item>
      <div class="green" />
    </x-grid-item>
    <x-grid-item>
      <div class="light-green" />
    </x-grid-item>
    <x-grid-item>
      <div class="green" />
    </x-grid-item>
    <x-grid-item>
      <div class="light-green" />
    </x-grid-item>
    <x-grid-item>
      <div class="green" />
    </x-grid-item>
  </x-grid>
</template>

<style lang="less" scoped>
.light-green {
  height: 108px;
  background-color: #e6f4ff;
}

.green {
  height: 108px;
  background-color: #bae0ff;
}
</style>

偏移

<script setup></script>

<template>
  <x-grid
    :columns="4"
    :gutter="12"
  >
    <x-grid-item :offset="1">
      <div class="light-green" />
    </x-grid-item>
    <x-grid-item :offset="1">
      <div class="green" />
    </x-grid-item>
  </x-grid>
</template>

<style lang="less" scoped>
.light-green {
  height: 108px;
  background-color: #e6f4ff;
}

.green {
  height: 108px;
  background-color: #bae0ff;
}
</style>

响应式列数

<script setup>
import { GridItem as XGridItem } from '@/components'
</script>

<template>
  <x-grid
    :columns="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
    :gutter="[12, 12]"
  >
    <x-grid-item
      v-for="(item, index) in 6"
      :key="item"
    >
      <div
        :class="{
          'light-green': index % 2 === 1,
          'green': index % 2 === 0,
        }"
      />
    </x-grid-item>
  </x-grid>
</template>

<style lang="less" scoped>
.light-green {
  height: 108px;
  background-color: #e6f4ff;
}

.green {
  height: 108px;
  background-color: #bae0ff;
}
</style>

响应式栅格项

<script setup>
import { GridItem as XGridItem } from '@/components'
</script>

<template>
  <x-grid :gutter="[12, 12]">
    <x-grid-item
      v-for="(item, index) in 6"
      :key="item"
      :lg="6"
      :md="8"
      :sm="12"
      :xl="4"
      :xs="24"
      :xxl="2"
    >
      <div
        :class="{
          'light-green': index % 2 === 1,
          'green': index % 2 === 0,
        }"
      />
    </x-grid-item>
  </x-grid>
</template>

<style lang="less" scoped>
.light-green {
  height: 108px;
  background-color: #e6f4ff;
}

.green {
  height: 108px;
  background-color: #bae0ff;
}
</style>

折叠

<script setup>
import { ref } from 'vue'

const gridCollapsed = ref(false)
const gridCollapsedRows = ref(1)
const gridItemCount = ref(4)
const showSuffix = ref(true)
</script>

<template>
  <x-grid :columns="2">
    <x-grid-item>
      <a-form-item label="数量">
        <a-input-number
          v-model:value="gridItemCount"
          :min="1"
        />
      </a-form-item>
    </x-grid-item>
    <x-grid-item>
      <a-form-item label="折叠后行数">
        <a-input-number
          v-model:value="gridCollapsedRows"
          :min="1"
        />
      </a-form-item>
    </x-grid-item>
    <x-grid-item>
      <a-form-item label="打开后缀节点">
        <a-switch v-model:checked="showSuffix" />
      </a-form-item>
    </x-grid-item>
    <x-grid-item>
      <a-form-item label="折叠栅格">
        <a-switch v-model:checked="gridCollapsed" />
      </a-form-item>
    </x-grid-item>
  </x-grid>

  <x-grid
    :collapsed="gridCollapsed"
    :collapsed-rows="gridCollapsedRows"
    :columns="5"
  >
    <x-grid-item
      v-for="i in gridItemCount"
      :key="i"
      :class="i % 2 ? 'green' : 'light-green'"
    >
      {{ i }}
    </x-grid-item>
    <x-grid-item
      v-if="showSuffix"
      #="{ overflow }"
      class="suffix"
      suffix
    >
      {{ overflow ? '存在溢出' : '不存在溢出' }}
    </x-grid-item>
  </x-grid>
</template>

<style lang="less" scoped>
.suffix {
  height: 108px;
  border: 1px solid #bae0ff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.light-green {
  height: 108px;
  background-color: #e6f4ff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.green {
  height: 108px;
  background-color: #bae0ff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

API

Grid Props

名称	说明	类型	默认值
columns	显示的栅格数量	number Object	24
gutter	栅格间隔，可以写成像素值设置水平间隔 。或者使用数组形式同时设置 [水平间距, 垂直间距]	number array	0
collapsed	是否默认折叠	boolean	false
collapsed-rows	默认展示的行数	number	1

GridItem Props

名称	说明	类型	默认值
span	栅格占据的列数	number	1
xs	<576px 栅格占据的列数	number	-
sm	≥576px 栅格占据的列数	number	-
md	≥768px 栅格占据的列数	number	-
lg	≥992px 栅格占据的列数	number	-
xl	≥1200px 栅格占据的列数	number	-
xxl	≥1600px 栅格占据的列数	number	-
offset	栅格左侧的间隔格数	number	0
suffix	栅格后缀，只能存在一个	boolean	false