Grid 网格

代码演示

基础用法

<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>

<script setup></script>

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

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

间隔

<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>

<script setup></script>

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

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

偏移

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

<script setup></script>

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

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

响应式列数

<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>

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

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

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

响应式栅格项

<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>

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

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

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

折叠

<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>

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

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

<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