Grid布局组件
使用display:grid
实现的网格布局组件,默认栅栏列数是24
警告
Grid
组件的子元素只能是GridItem
提示
Grid
组件内部使用的断点是参照El-Layout
设计的
安装
sh
yarn add @suite-kit/grid
# or
npm i @suite-kit/grid
yarn add @suite-kit/grid
# or
npm i @suite-kit/grid
基础用法
<template>
<Grid :gap="[20, 20]" :cols="24">
<GridItem v-for="item in 8" :key="item" :span="item % 2 == 0 ? 8 : 4">
<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
</GridItem>
</Grid>
</template>
<script setup lang="ts">
import { Grid, GridItem } from "@suite-kit/grid";
</script>
<style scoped lang="scss">
.box {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
}
.light-3 {
background-color: var(--el-color-primary-light-3);
}
.dark {
background-color: var(--el-color-primary-dark-2);
}
</style>
间隔
可以传递数组精准控制两个方向的间距,也可以传递一个数字同时设置两个方向的间距
<template>
<div>
<el-space size="large">
<div style="width: 200px">
<el-form-item label="横向间距">
<el-input-number :max="100" :min="0" v-model="gap.x"></el-input-number>
</el-form-item>
</div>
<div style="width: 200px">
<el-form-item label="纵向间距">
<el-input-number :max="100" :min="0" v-model="gap.y"></el-input-number>
</el-form-item>
</div>
</el-space>
<Grid :gap="[gap.x, gap.y]">
<GridItem v-for="item in 8" :key="item" :span="6">
<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
</GridItem>
</Grid>
<hr />
<el-space size="large">
<div style="width: 200px">
<el-form-item label="间距">
<el-input-number :max="100" :min="0" v-model="gap.total"></el-input-number>
</el-form-item>
</div>
</el-space>
<Grid :gap="gap.total">
<GridItem v-for="item in 8" :key="item" :span="6">
<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
</GridItem>
</Grid>
</div>
</template>
<script setup lang="ts">
import { Grid, GridItem } from "@suite-kit/grid";
import { ElFormItem, ElSpace, ElInputNumber } from "element-plus";
import { reactive } from "vue";
const gap = reactive({
x: 20,
y: 20,
total: 20,
});
</script>
<style scoped lang="scss">
.box {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
}
.light-3 {
background-color: var(--el-color-primary-light-3);
}
.dark {
background-color: var(--el-color-primary-dark-2);
}
</style>
偏移
设置offset
来控制GridItem的偏移量,也可以设置响应式的offset
<template>
<Grid :gap="[20, 20]" :cols="24">
<GridItem v-for="item in 8" :key="item" :span="item % 2 === 0 ? 5 : 4" :offset="item % 2 == 0 ? 1 : 2">
<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
</GridItem>
</Grid>
<hr />
<Grid :gap="[20, 20]" :cols="24">
<GridItem v-for="item in 6" :key="item" :span="6" :offset="item === 2 ? 2 : 0">
<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
</GridItem>
</Grid>
</template>
<script setup lang="ts">
import { Grid, GridItem } from "@suite-kit/grid";
</script>
<style scoped lang="scss">
.box {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
}
.light-3 {
background-color: var(--el-color-primary-light-3);
}
.dark {
background-color: var(--el-color-primary-dark-2);
}
</style>
响应式列数
Grid组件默认生成的响应式列数是24列,可传入cols
手动设置,除了传入一个固定的数字外,也可传入响应式配置
<template>
<Grid :gap="[20, 20]" :cols="24">
<GridItem v-for="item in 8" :key="item" v-bind="responsive">
<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'">{{ item }}</div>
</GridItem>
</Grid>
<hr />
<Grid :gap="[20, 20]" :cols="{ xs: 1, sm: 2, md: 3, xl: 4, lg: 4 }">
<GridItem v-for="item in 8" :key="item">
<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'">{{ item }}</div>
</GridItem>
</Grid>
</template>
<script setup lang="ts">
import { Grid, GridItem, BreakPoint } from "@suite-kit/grid";
import { reactive } from "vue";
const responsive = reactive<{ span: { [K in BreakPoint]: number } }>({
span: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4 },
});
</script>
<style scoped lang="scss">
.box {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
}
.light-3 {
background-color: var(--el-color-primary-light-3);
}
.dark {
background-color: var(--el-color-primary-dark-2);
}
</style>
折叠
设置collapsed
来控制折叠状态,设置collapsedRows
控制折叠后的行数
<template>
<el-button type="primary" @click="click">{{ collapsed ? "展开" : "折叠" }}</el-button>
<p></p>
<Grid :gap="[20, 20]" :cols="24" :collapsed="collapsed" :collapsed-rows="1">
<template v-for="item in 10" :key="item">
<GridItem :span="4">
<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'">{{ item }}</div>
</GridItem>
</template>
<GridItem :span="4" suffix #="{ overflow }">
<div class="box">
{{ overflow ? "溢出" : "未溢出" }}
</div>
</GridItem>
</Grid>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ElButton } from "element-plus";
import { Grid, GridItem } from "@suite-kit/grid";
const collapsed = ref(true);
const click = () => {
collapsed.value = !collapsed.value;
};
</script>
<style scoped lang="scss">
.box {
width: 100%;
height: 32px;
background-color: var(--el-color-success);
line-height: 32px;
text-align: center;
}
.light-3 {
background-color: var(--el-color-primary-light-3);
}
.dark {
background-color: var(--el-color-primary-dark-2);
}
</style>
Grid属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
cols | 栅栏列数 | number | { xs: number, sm: number, md: number, lg: number, xl: number } | 24 |
collapsed | 是否折叠 | boolean | false |
collapsedRows | 折叠后行数 | number | 1 |
gap | 栅栏间距 | number | [xGap:number,yGap:number] | 0 |
GridItem属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
span | 占据的列数 | number|Record<'xs'|'sm'|'md'|'lg'|'xl'> | 1 |
offset | 栅栏偏移量 | number|Record<'xs'|'sm'|'md'|'lg'|'xl'> | 0 |
suffix | 是否后缀 | boolean | false |