• Grid
    • 安装
    • grid
    • 属性
    • 插槽
    • grid-item
    • 属性
    • 插槽
    • 相关 issue
    • 贡献者
    • 发布日志

    Grid

    Grid

    demo 原始链接demo 源码编辑文档组件源码

    grid - 图1

    二维码

    grid - 图2

    Install

    安装

    局部注册

    全局注册

    1. import { Grid, GridItem } from 'vux'
    3. export default {
    4.   components: {
    5.     Grid,
    6.     GridItem
    7.   }
    8. }

    1. // 在入口文件全局引入
    3. import Vue from 'vue'
    4. import { Grid, GridItem } from 'vux'
    6. Vue.component('grid', Grid)
    7. Vue.component('grid-item', GridItem)
    1. <grid>
    2.   <grid-item label="Grid" v-for="i in 9">
    3.     <img slot="icon" src="../assets/grid_icon.png">
    4.   </grid-item>
    5. </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—

    Issues

    相关 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

    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九宫格组件