FaLayoutGrid 响应式布局

根据容器宽度而非全局窗口宽度选择断点，适合可拖宽 Drawer、Dialog、表单和表格搜索区域。

响应式列数与跨列

查看代码

Vue

<template>
	<FaLayoutGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }" :gap="16">
		<FaLayoutGridItem v-for="item in 5" :key="item">
			<div class="demo-grid-card">第 {{ item }} 项</div>
		</FaLayoutGridItem>
		<FaLayoutGridItem :span="2" :xs="{ span: 1 }">
			<div class="demo-grid-card">桌面占两列，手机占一列</div>
		</FaLayoutGridItem>
	</FaLayoutGrid>
</template>

容器断点变化事件

查看代码

Vue

<template>
	<div class="demo-stack">
		<ElAlert :closable="false" :title="`当前容器断点：${breakpoint}`" type="info" />
		<FaLayoutGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }" :gap="12" @breakpoint-change="breakpoint = $event.breakpoint">
			<FaLayoutGridItem v-for="item in 5" :key="item"
				><div class="demo-grid-card">{{ item }}</div></FaLayoutGridItem
			>
		</FaLayoutGrid>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const breakpoint = ref("等待布局计算");
</script>

折叠行与末尾操作项

查看代码

Vue

<template>
	<FaLayoutGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }" :gap="[16, 12]" :collapsed="collapsed" :collapsed-rows="1">
		<FaLayoutGridItem v-for="item in 8" :key="item" :index="item - 1">
			<div class="demo-grid-card">筛选项 {{ item }}</div>
		</FaLayoutGridItem>
		<FaLayoutGridItem suffix :span="1">
			<ElButton type="primary" @click="collapsed = !collapsed">{{ collapsed ? "展开" : "收起" }}</ElButton>
		</FaLayoutGridItem>
	</FaLayoutGrid>
</template>

<script setup lang="ts">
import { ref } from "vue";

const collapsed = ref(true);
</script>

FaLayoutGrid 完整 API

Props 属性 (4)

属性	来源	说明	类型	默认值
cols	Fast 新增	各响应式断点的列数。	String / Number / Object	{"xs":1,"sm":2,"md":3,"lg":4,"xl":5}
collapsed	Fast 新增	是否启用折叠布局计算。	Boolean	false
collapsedRows	Fast 新增	折叠状态保留的行数。	String / Number	1
gap	Fast 新增	网格水平与垂直间距。	Number / Array	0

Events 事件（1）

名称	来源	说明	参数 / 类型
breakpointChange	Fast 新增	容器宽度跨越响应式断点时触发，参数为新的断点名称。	—

Slots 插槽（1）

名称	来源	说明	参数 / 类型
default	Fast 新增	组件默认内容插槽。	—

Expose 暴露（1）

名称	来源	说明	参数 / 类型
breakpoint	Fast 新增	当前容器命中的响应式断点。	—

关联组件：FaLayoutGridItem

支持基础 span、offset、末列 suffix，以及 xs、sm、md、lg、xl 的独立覆盖。

Span、Offset、Suffix 与断点覆盖

查看代码

Vue

<template>
	<FaLayoutGrid :cols="{ xs: 1, sm: 3, md: 4, lg: 5, xl: 6 }" :gap="16">
		<FaLayoutGridItem :span="2" :xs="{ span: 1 }"><div class="demo-grid-card">span=2，手机 span=1</div></FaLayoutGridItem>
		<FaLayoutGridItem :span="1" :offset="1" :xs="{ span: 1, offset: 0 }"><div class="demo-grid-card">offset=1</div></FaLayoutGridItem>
		<FaLayoutGridItem suffix :span="1"><div class="demo-grid-card">suffix 贴齐末列</div></FaLayoutGridItem>
	</FaLayoutGrid>
</template>

FaLayoutGridItem 完整 API

Props 属性 (8)

属性	来源	说明	类型	默认值
offset	Fast 新增	偏移量或浮层偏移。	String / Number	0
span	Fast 新增	占用的网格列数。	String / Number	1
suffix	Fast 新增	是否作为布局末尾操作项。	Boolean	false
xs	Fast 新增	xs 断点下的布局配置。	Object	—
sm	Fast 新增	sm 断点下的布局配置。	Object	—
md	Fast 新增	md 断点下的布局配置。	Object	—
lg	Fast 新增	lg 断点下的布局配置。	Object	—
xl	Fast 新增	xl 断点下的布局配置。	Object	—

Events 事件（0）

名称	来源	说明	参数 / 类型
无运行时 Emits 声明。

Slots 插槽（1）

名称	来源	说明	参数 / 类型
default	Fast 新增	组件默认内容插槽。	—

Expose 暴露（1）

名称	来源	说明	参数 / 类型
show	Fast 新增	布局项当前是否可见。	—

断点范围

断点	容器宽度
xs	0 - 479px
sm	480 - 768px
md	> 768 - 1024px
lg	> 1024 - 1440px
xl	> 1440px