Grid 宫格 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

在水平和垂直方向，将布局切分成若干等大的区块。

规则

区块中的内容应该是同类元素，eg：都是图片，或者都是图标+文字。
使用插槽引入组件 <GridItem> 自定义宫格项目

引入方式

数字生活网页应用工程中，不需要 import，直接使用组件标签即可。

import {Grid, GridItem} from '@21cnfe/vui'  
Vue.component('Grid', Grid)
Vue.component('GridItem', GridItem)

代码演示

Grid 宫格 grids

基本用法传入 data 数据即可，不使用插槽时 data 作用在 Grid 组件上， data 数据只支持 icon图片和 text 文本的宫格项

<Grid :data="imgData"></Grid>

Column设置通过设置 columnNum 设置宫格列数，默认为 4 列

<Grid :columnNum="3" :data="imgData"></Grid>

插槽方式通过引入 GridItem 自定义宫格项目，数据作用在 GridItem 上

<Grid :columnNum="3" :square="true" :hasLine="false" :activeStyle="false">
  <GridItem v-for="(item, index) in imgData" :key="index" @onClick="slotClick(item)">
    <img :src="item.url" />
    <span>{{item.text}}</span>
  </GridItem>
</Grid>

API

属性	说明	类型	默认值
`data`	不使用插槽情况下的传入数据	Array<{icon, text}>	`--`
`columnNum`	列数	Number	4
`hasLine`	是否有边框	Boolean	`true`
`square`	每个格子是否固定为正方形	Boolean	`true`
`activeStyle`	点击反馈的自定义样式 (设为 false 时表示禁止点击反馈)	{}/false	`{}`

Event

Grid

事件名称	说明	回调参数
`onClick`	宫格点击事件触发的回调函数	`当前点击格子`

GridItem

事件名称	说明	回调参数
`onClick`	宫格点击事件回调函数	`--`

Slot

Grid

属性	说明
`匿名插槽`	插入组件 `<GridItem>` 实现自定义宫格

GridItem

属性	说明
`匿名插槽`	插入自定义项目

1. Grid 宫格 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Grid 宫格 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Event

Grid

GridItem

Slot

Grid

GridItem

Grid 宫格 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用