更新记录

1.0.0（2026-10-08） 下载此版本

• 首个版本，实现组件基础能力，支持 Vue2 / Vue3、全平台（App / H5 / 各家小程序）。

平台兼容性

uni-app(4.06)

e-grid 宫格

宫格布局组件，由 e-grid 容器与 e-grid-item 宫格项组成，用于九宫格入口、功能导航、图标菜单等场景。

特性

• 自定义列数（1~8 列）
• 支持边框开关与方形单元格
• 内置角标支持
• 支持点击跳转（自动处理普通页面与 tabBar 页面）

基本用法

<template>
  <view>
    <!-- 三列九宫格 -->
    <e-grid :column="3">
      <e-grid-item
        v-for="item in menus"
        :key="item.text"
        :icon="item.icon"
        :text="item.text"
        :badge="item.badge"
        @click="onMenu(item)"
      />
    </e-grid>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        { text: '首页', icon: '/static/icons/home.png' },
        { text: '路况', icon: '/static/icons/road.png', badge: 3 },
        { text: '服务区', icon: '/static/icons/service.png' },
        { text: '摄像头', icon: '/static/icons/camera.png' },
        { text: '事件', icon: '/static/icons/event.png', badge: 12 },
        { text: '我的', icon: '/static/icons/user.png' }
      ]
    }
  },
  methods: {
    onMenu(item) {
      console.log('点击了：', item.text)
    }
  }
}
</script>

e-grid 属性

e-grid-item 属性

插槽

e-grid-item 提供默认插槽，可完全自定义单元格内容：

<e-grid :column="2">
  <e-grid-item text="自定义">
    <e-icons type="star-filled" color="#ff9500" :size="32" />
    <text class="label">收藏</text>
  </e-grid-item>
</e-grid>

事件

使用提示

为什么用百分比宽度而不是 flex: 1？

如果用 flex: 1 平分宽度，最后一行项目数不足时（比如 5 个项目放 3 列），剩下的 2 个会被拉伸填满整行，导致宽度不一致。组件改为显式设置 width: 100 / column %，保证每个格子宽度恒定。

边框显示不全

边框是画在每个格子右侧和下侧，因此最后一列会多出一条右边线。如果需要精确的四周闭合边框，设置 outerBorder 为 true 让容器承担外框。

点击跳转 tabBar 页面

url 指向 tabBar 页面时 uni.navigateTo 会失败，组件已内置降级：失败后自动尝试 switchTab。

平台兼容

App (vue / nvue)、H5、全平台小程序均支持。

隐私与权限

纯前端渲染组件，不申请任何权限，不采集、不上传任何数据。