宫格

使用方式
<template>
  <sp-grid :cell='4'>
    <sp-grid-item text="音乐">
      <img slot="icon" src="http://img.zcool.cn/community/01524a56093f0a6ac7251df855d5c0.png@1280w_1l_2o_100sh.webp"/>
    </sp-grid-item>
    <sp-grid-item text="邮票">
      <img slot="icon" src="http://img.zcool.cn/community/0177295609403532f875a132b3ba65.png@1280w_1l_2o_100sh.webp"/>
    </sp-grid-item>
    <sp-grid-item text="电影">
      <img slot="icon" src="http://img.zcool.cn/community/017cc156093f0d6ac7251df8c18380.png@1280w_1l_2o_100sh.webp"/>
    </sp-grid-item>
    <sp-grid-item text="导航">
      <img slot="icon" src="http://img.zcool.cn/community/01f0f45609403632f875a1324dedfc.png@1280w_1l_2o_100sh.png"/>
    </sp-grid-item>
  </sp-grid>
</template>

sp-grid

props / 属性
参数 类型 默认值 作用
cell Number 4 每一行显示多少列格子

sp-grid-item

props / 属性
参数 类型 默认值 作用
text String Null 每一个grid的文本
slot / 插槽
slot 作用
icon 每一个grid的图标
methods / 暴露方法
name 作用
click 每一个grid的点击事件

results matching ""

    No results matching ""