Mural Plus

Grid 宫格 ​

宫格由容器 mu-grid 与单元格 mu-grid-item 组合而成，常用于金刚区等入口场景。容器控制列数与分隔线，单元格支持图标、文字、尺寸与颜色配置，点击时可回传所在索引。

小程序APPWeb
✓✓✓

实例 ​

以下按属性分别说明 mu-grid 与 mu-grid-item 的用法，可按需组合。

html
<template>
  <mu-grid :columns="4">
    <mu-grid-item icon="home" text="首页"></mu-grid-item>
    <mu-grid-item icon="star" text="收藏"></mu-grid-item>
    <mu-grid-item icon="chat" text="消息"></mu-grid-item>
    <mu-grid-item icon="setting" text="设置"></mu-grid-item>
  </mu-grid>
</template>

列数 ​

columns 控制每行显示的列数，默认为 4。

html
<mu-grid :columns="4">
  <mu-grid-item icon="home" text="首页"></mu-grid-item>
  <mu-grid-item icon="star" text="收藏"></mu-grid-item>
  <mu-grid-item icon="chat" text="消息"></mu-grid-item>
  <mu-grid-item icon="setting" text="设置"></mu-grid-item>
</mu-grid>

<mu-grid :columns="3">
  <mu-grid-item icon="camera" text="拍照"></mu-grid-item>
  <mu-grid-item icon="picture" text="相册"></mu-grid-item>
  <mu-grid-item icon="scan" text="扫一扫"></mu-grid-item>
</mu-grid>

分隔线 ​

border 为 false 时隐藏单元格之间的分隔线。

html
<mu-grid :columns="4" :border="false">
  <mu-grid-item icon="home" text="首页"></mu-grid-item>
  <mu-grid-item icon="star" text="收藏"></mu-grid-item>
  <mu-grid-item icon="chat" text="消息"></mu-grid-item>
  <mu-grid-item icon="setting" text="设置"></mu-grid-item>
</mu-grid>

图标尺寸 ​

iconSize 设置单元格图标尺寸。

html
<mu-grid :columns="3">
  <mu-grid-item icon="home" text="small 36" :icon-size="36"></mu-grid-item>
  <mu-grid-item icon="star" text="default 52" :icon-size="52"></mu-grid-item>
  <mu-grid-item icon="setting" text="large 72" :icon-size="72"></mu-grid-item>
</mu-grid>

图标颜色 ​

iconColor 设置图标颜色，可使用主题变量或任意合法颜色。

html
<mu-grid :columns="3">
  <mu-grid-item icon="camera" text="拍照" icon-color="var(--mu-color-primary)"></mu-grid-item>
  <mu-grid-item icon="picture" text="相册" icon-color="var(--mu-color-success)"></mu-grid-item>
  <mu-grid-item icon="scan" text="扫一扫" icon-color="var(--mu-color-warning)"></mu-grid-item>
</mu-grid>

自定义内容 ​

通过 icon 插槽自定义图标区域，通过默认插槽自定义文字区域，二者分别优先于 icon 与 text 属性。

html
<mu-grid :columns="2">
  <mu-grid-item @click="onItem">
    <template #icon>
      <view class="gauge"><text class="gauge-num">128</text></view>
    </template>
    <template #default>
      <text class="cell-title">今日新增</text>
      <text class="cell-sub">较昨日 +12%</text>
    </template>
  </mu-grid-item>
  <mu-grid-item @click="onItem">
    <template #icon>
      <view class="gauge gauge-green"><text class="gauge-num">36</text></view>
    </template>
    <template #default>
      <text class="cell-title">待处理</text>
      <text class="cell-sub">共 3 个分类</text>
    </template>
  </mu-grid-item>
</mu-grid>

点击事件 ​

点击单元格时触发 click 事件，回传该单元格所在索引。

html
<mu-grid :columns="4">
  <mu-grid-item icon="home" text="首页" @click="onItem"></mu-grid-item>
  <mu-grid-item icon="star" text="收藏" @click="onItem"></mu-grid-item>
</mu-grid>

属性 ​

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

宫格容器 ​

属性名称说明类型默认值
columns列数number4
border是否显示分隔线booleantrue
customClass自定义根节点类名string-
customStyle自定义根节点样式any-

宫格单元格 ​

属性名称说明类型默认值
text文字内容string-
icon图标名称string-
iconSize图标尺寸string | number44
iconColor图标颜色stringvar(--mu-grid-icon-color, var(--mu-text-main-color, #333333))
customClass自定义根节点类名string-
customStyle自定义根节点样式any-

事件 ​

组件支持以下事件。

事件名说明回调参数
click点击单元格时触发（mu-grid-item）index: number，所在索引，从 0 开始

插槽 ​

组件支持以下插槽。

名称说明
default宫格单元格列表（mu-grid）
icon自定义图标区域，优先于 icon 属性（mu-grid-item）
default自定义文字区域，优先于 text 属性（mu-grid-item）

注意事项 ​

  • 平台差异：App、小程序、Web 表现一致。
  • 使用注意：mu-grid-item 需嵌套在 mu-grid 内，columns 才能正确控制列宽与点击回传的索引。
  • 使用注意：click 回传的 index 按项目注册顺序从 0 开始，动态增删项目时会重新计算。
  • 使用注意：图标插槽 #icon 优先于 icon 属性，默认插槽优先于 text 属性；分隔线由 mu-grid 的 border 统一控制。