Grid 宫格布局

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

基础用法

宫格的宽度是根据父元素的宽度自动计算的，宫格的列数可以通过 columns 属性来指定。

<vd-grid columns="6">
  <vd-grid-item v-for="num in 18" :key="num" :index="index">
    {{ num }}
  </vd-grid-item>
</vd-grid>

行、列间距

通过 rowGap columnGap 属性来设置宫格行、列间距。

<vd-grid columns="6" row-gap="12" column-gap="12">
  <vd-grid-item v-for="num in 18" :key="num" :index="index">
    {{ num }}
  </vd-grid-item>
</vd-grid>

自定义高度

通过 height 属性来设置宫格自定义高度，设置百分比时，根据宽度比例计算。

如 height="75%" 表示宫格高度为宫格宽度的 75%。

<vd-grid columns="6" height="75%">
  <vd-grid-item v-for="num in 18" :key="num" :index="index">
    {{ num }}
  </vd-grid-item>
</vd-grid>

载入动画

通过 grid-transition 属性来设置宫格自定义载入动画，动画名称参考 Transition 组件。

<vd-grid columns="6" grid-transition="zoom">
  <vd-grid-item v-for="num in 18" :key="num" :index="index">
    {{ num }}
  </vd-grid-item>
</vd-grid>

拖拽排序

通过 sortable 属性来设置宫格是否可拖拽排序。

<vd-grid columns="6" sortable>
  <vd-grid-item v-for="num in 18" :key="num" :index="index">
    {{ num }}
  </vd-grid-item>
</vd-grid>

跨行列

通过 col-span row-span 属性设置网格项跨列、跨行。布局时会自动避开已占用单元格。

<vd-grid columns="4" row-gap="12" column-gap="12">
  <vd-grid-item :index="0" :col-span="2" :row-span="2">大</vd-grid-item>
  <vd-grid-item :index="1">1</vd-grid-item>
  <vd-grid-item :index="2">2</vd-grid-item>
  <vd-grid-item :index="3" :col-span="2">宽</vd-grid-item>
  <vd-grid-item :index="4">4</vd-grid-item>
  <vd-grid-item :index="5">5</vd-grid-item>
</vd-grid>

布局起点

通过 origin 指定排布起点，默认 top-left 从左上角开始；设为 top-right 则从右上角开始、按列从右往左填充。

<vd-grid columns="4" origin="top-right" row-gap="12" column-gap="12">
  <vd-grid-item :index="0" :col-span="2" :row-span="2">大</vd-grid-item>
  <vd-grid-item :index="1">1</vd-grid-item>
  <vd-grid-item :index="2">2</vd-grid-item>
</vd-grid>

API

Grid Props

参数	说明	类型	默认值
columns	列数	string | number	3
origin	布局起点	GridOrigin	'top-left'
height	高度	string | number	'100%'
radius	边框半径	string | number	4
row-gap	行间距	string | number	8
column-gap	列间距	string | number	8
grid-transition	载入动画	TransitionName	'none'
grid-transition-duration	载入动画持续时间	TransitionDuration	400
sortable	是否可拖拽排序	boolean	false
sort-placeholder	是否展示排序占位	boolean	false

GridItem Props

参数	说明	类型	默认值
transition	载入动画	TransitionName	-
transition-duration	载入动画持续时间	TransitionDuration	-
transition-delay	载入动画延迟时间	TransitionDuration	-
sortable	是否可拖拽排序	boolean	-
col-span	跨列数	string | number	1
row-span	跨行数	string | number	1
index	索引，在循环时设置	number	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Grid Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
resize	尺寸更新时触发	NodeSize
sort-start	排序开始时触发	GridOnSortStartEvent
sort-change	排序改变时触发	GridOnSortChangeEvent
sort-end	排序结束时触发	GridOnSortEndEvent

GridItem Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Grid Slots

名称	说明
default	自定义内容
sort-placeholder	排序占位内容

GridItem Slots

名称	说明
default	自定义内容
drag	排序拖拽内容

Grid Expose

方法名 / 属性名	说明	参数	返回值
rect	容器宽度	-	{ width: number }
gap	网格间距	-	{ row: number; column: number }
itemSize	网格项尺寸	-	ComputedRef<{ width: number; height: number }>
position	网格项位置表	-	Ref<Record<string, GridItemPosition>>
swap	交换两个网格项	fromIndex: number, toIndex: number	false | GridOnSortChangeEvent
getSortData	获取排序数据	-	GridSortData

类型定义

组件导出以下类型定义：

import type { GridOnSortStartEvent, GridOnSortChangeEvent, GridOnSortEndEvent } from 'vital-design';