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>

API

Grid Props

参数	说明	类型	默认值
columns	列数	string | number	3
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-target	是否展示排序目标占位	boolean	false

GridItem Props

参数	说明	类型	默认值
transition	载入动画	TransitionName	-
transition-duration	载入动画持续时间	TransitionDuration	-
transition-delay	载入动画延迟时间	TransitionDuration	-
sortable	是否可拖拽排序	boolean	-
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	自定义内容
target	排序目标占位内容

GridItem Slots

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

类型定义

组件导出以下类型定义：

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