v-grid

介绍

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

预览

引入

方式请参考组件用法 。

代码演示

自定义列数

默认一行展示四个格子，可以通过 column-num 自定义列数。

<v-grid :column-num="3" :gutter="20" >
  <v-grid-item>
    <v-image :config="imageConfig"></v-image>
  </v-grid-item>
  <v-grid-item>
    <v-image :config="imageConfig"></v-image>
  </v-grid-item>
  <v-grid-item>
    <v-image :config="imageConfig"></v-image>
  </v-grid-item>
</v-grid>

export default {
    setup() {
    return {  };
    },
};

API

Tabs Props

参数	说明	类型	默认值
column-num	列数	number/string	4
gutter	格子之间的间距	number/string	0
center	是否将格子内容居中显示	Boolean	true
direction	格子内容排列的方向，可选值为 horizontal	string	vertical
config	支持全部v-Group属性	object	--

GridItem Props

参数	说明	类型	默认值
config	支持全部v-Group属性	object	--