Grid
Install

安装

<grid>
  <grid-item label="Grid" v-for="i in 9">
    <img slot="icon" src="../assets/grid_icon.png">
  </grid-item>
</grid>

grid

grid

属性

名字类型默认值说明版本要求
rowsnumber3(v2.6.0 之后废弃,使用 col 替代)宫格行数,建议少于5v2.2.0
colsnumber3列数。如果为非单行 Grid,需要设置 cols,否则所有 GridItem 会平均宽度显示在一行。v2.6.1
show-lr-bordersbooleantrue是否显示左右边框v2.8.1
show-vertical-dividersbooleantrue是否显示垂直分割线v2.8.1

插槽

名字说明版本要求
默认插槽用于grid-item的插槽--
grid-item

grid-item

属性

名字类型默认值说明版本要求
iconstring图标地址,如果是线上地址,推荐使用该prop。如果是本地图标资源,使用slot=icon可以保证资源被正确打包--
labelstringlabel 文字--
linkstringvue-router 路径--

插槽

名字说明版本要求
icon图标内容,直接使用img标签--
labellabel 文字的 slot,作用同 prop:label--


贡献者

贡献者

该组件(包含文档)迭代次数 21,贡献人数 3

airylandQiongrong JiangLinHaobin

Changelog

发布日志

  • v2.8.1 [feature] 支持 prop:show-lr-borders、prop:show-vertical-dividers 用以隐藏左右边线及垂直分割线 #2488
  • v2.6.1 [feature] 添加 `cols` 属性,自定义列数
  • v2.6.0 [change] rows 属性已经废弃,使用自动计算 #1971
  • v2.2.0 [feature] 支持定义列数
  • v2.2.0 [enhance] 如果没有使用 icon 和 label,则直接隐藏 slot:icon 和 slot:label
  • v2.0.14 [feature] 增加`grid`九宫格组件