我的书签
添加书签
移除书签
Grid
安装
局部注册
全局注册
import { Grid, GridItem } from 'vux'export default {components: {Grid,GridItem}}
// 在入口文件全局引入import Vue from 'vue'import { Grid, GridItem } from 'vux'Vue.component('grid', Grid)Vue.component('grid-item', GridItem)
<grid><grid-item label="Grid" v-for="i in 9"><img slot="icon" src="../assets/grid_icon.png"></grid-item></grid>
grid
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| rows | number | 3 | (v2.6.0 之后废弃，使用 col 替代)宫格行数，建议少于5 | v2.2.0 |
| cols | number | 3 | 列数。如果为非单行 Grid，需要设置 cols，否则所有 GridItem 会平均宽度显示在一行。 | v2.6.1 |
| show-lr-borders | boolean | true | 是否显示左右边框 | v2.8.1 |
| show-vertical-dividers | boolean | true | 是否显示垂直分割线 | v2.8.1 |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | 用于grid-item的插槽 | — |
grid-item
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| icon | string | 图标地址，如果是线上地址，推荐使用该prop。如果是本地图标资源，使用slot=icon可以保证资源被正确打包 | — | |
| label | string | label 文字 | — | |
| link | string | vue-router 路径 | — |
插槽
| 名字 | 说明 | 版本要求 |
| icon | 图标内容，直接使用img标签 | — |
| label | label 文字的 slot，作用同 prop:label | — |
相关 issue
- #2488 Grid组件的建议
- #1997 vux@2.6.0 组件grid设置 :cols:4 无效，不能分列
- #1971 Why is grid columns prop named rows?
- #781 grid-item, label问题
- #778 grid-item没有href属性？
贡献者
该组件(包含文档)迭代次数 22，贡献人数 4
cyhoneairylandQiongrong JiangLinHaobin
