更新记录

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

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

平台兼容性

uni-app(4.21)

e-list 列表

列表组件，由 e-list 容器与 e-list-item 列表项组成，常用于设置页、消息列表、订单列表等场景。

特性

• 三栏结构：左（图标/缩略图）- 中（标题 + 备注）- 右（附加内容 + 箭头）
• 内置常用 SVG 图标，无需额外依赖
• 支持点击反馈、自动跳转
• 分隔线由容器统一控制，便于成组管理
• 自包含设计，单独安装也不会缺依赖

基本用法

<template>
  <view>
    <e-list>
      <e-list-item title="账号设置" icon="person" note="手机号、密码" show-arrow />
      <e-list-item title="消息通知" icon="notification" extra-text="已开启" show-arrow />
      <e-list-item title="我的订单" icon="order" :badge="3" show-arrow />
      <e-list-item title="关于我们" icon="info" extra-text="v1.0.0" show-arrow />
    </e-list>
  </view>
</template>

带缩略图与自定义内容

<template>
  <e-list>
    <e-list-item
      title="张三"
      note="路政巡查一组"
      thumbnail="/static/avatar.jpg"
      extra-text="在线"
      show-arrow
    />
    <!-- 自定义头像 -->
    <e-list-item title="李四" note="监控中心">
      <template #avatar>
        <view class="custom-avatar">李</view>
      </template>
      <template #extra>
        <e-badge :value="5" />
      </template>
    </e-list-item>
  </e-list>
</template>

e-list 属性

e-list-item 属性

内置图标名

e-list-item 的 icon 属性支持以下内置图标名（内联 SVG，无需额外依赖）：

home person setting list email phone star star_filled heart location notification cart order wallet image link lock calendar

如果需要内置图标表之外的图标，直接传图片路径即可：

<e-list-item title="摄像头" icon="/static/icons/camera.png" show-arrow />

组件通过「是否包含 / 或 . 」来判断是图标名还是图片路径。

插槽

事件

实现说明

为什么要 min-width: 0？

中间文本栏设置了 flex: 1 + min-width: 0。这个组合看起来很怪，但缺一不可：flex 子项的默认 min-width 是 auto，意味着它不会收缩到小于内容的宽度。当标题很长时，中间栏会撑开把右侧箭头挤出屏幕。加上 min-width: 0 才能让 text-overflow: ellipsis 真正生效。

为什么图标内联而不用 e-icons？

uni_modules 插件之间不应互相引用内部文件——如果用户只安装了 e-list 没装 e-icons，构建会直接失败。插件必须自包含，因此这里内联了最常用的 18 个图标 path 和纯 CSS 箭头。

平台兼容

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

隐私与权限

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