更新记录

0.1.6(2026-08-18) 下载此版本

  • 蒸汽模式兼容:lines CSS 声明迁移为 <text>:max-lines 属性(官方蒸汽模式方案),消除 Vapor 运行时与 CSS 编译器警告

0.1.4(2026-08-14) 下载此版本

  • 精简 readme:移除内部开发向内容(设计说明 / 实现细节 / 平台差异实现等),只保留安装、用法、API、主题等用户文档

0.1.2(2026-08-07) 下载此版本

  • 支持 iOS 端:走 #ifndef APP-HARMONY 公共分支,无额外端差异代码,iOS 直接可用
查看更多

平台兼容性

uni-app x(4.25)

Chrome Safari Android iOS 鸿蒙 微信小程序

其他

多语言 暗黑模式 宽屏模式
× ×

nax-avatar

uni-app x 头像组件,提供常用能力。

依赖

  • nax-ui-theme(CSS 变量 --nax-*,安装时依赖 / 运行时弱依赖)

基础用法

<!-- 图片头像 -->
<nax-avatar src="https://example.com/a.jpg"></nax-avatar>

<!-- 文字头像 -->
<nax-avatar text="NA" color="#18a058"></nax-avatar>

<!-- 自定义尺寸(px) -->
<nax-avatar src="https://example.com/a.jpg" size="48"></nax-avatar>

<!-- 边框 -->
<nax-avatar src="https://example.com/a.jpg" border-color="#18a058"></nax-avatar>

形状 shape

说明
circle 圆形(默认)
square 直角方形
round 圆角方形

round 布尔在本组件用 shape="circle" 表达。

尺寸 size

边长 尺寸别名
sm / small 28px small
md / medium 34px medium(默认)
lg / large 40px large
数字字符串 自定义 px number

Props

属性 类型 默认 说明
src string '' 图片地址
text string '' 文字头像;无图或失败时展示
size string md sm / md / lg 或数字字符串
shape string circle circle / square / round
bordered boolean false 描边
border-color string '' 描边颜色;有值时自动显示描边
color string '' 背景色(文字头像常用)
text-color string '' 文字颜色;有 color 时默认 #fff
mode string aspectFill 原生 image mode
object-fit string '' 兼容常用取值:fill / contain / cover / none / scale-down
fallback-src string '' 加载失败回退图
custom-class string '' 根节点扩展 class

事件

事件 说明
click 点击
load 图片加载成功
error 主图与 fallback 均失败(或仅主图失败且无 fallback)

插槽

名称 说明
default 无图 / 最终失败时的自定义内容(如 nax-icon

与徽标组合

<nax-badge value="8" dot>
  <nax-avatar src="https://example.com/a.jpg"></nax-avatar>
</nax-badge>

主题

通过 CSS 变量覆盖:

Token 用途
--nax-avatar-color 头像背景色
--nax-avatar-radius 头像圆角
--nax-avatar-radius-square 方形头像圆角
--nax-avatar-text-color 头像文字色
--nax-color-bg-hover 按压/悬停背景色
--nax-color-border 边框色
--nax-color-text-secondary 次要文字色

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。