Grid 组件使用教程

优质

小牛编辑

130浏览

2023-12-01

安装

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>

名字	类型	默认值	说明	版本要求
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`的插槽	--

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