更新记录

1.0.2（2026-02-27） 下载此版本

• 解决 wifi 图标真机无法显示问题

1.0.1（2026-02-27） 下载此版本

• 修复wifi信号方向问题

1.0.0（2026-02-27） 下载此版本

• 支持 cellular / wifi 两种信号类型渲染
• 支持 level (0-4) 信号强度动态展示
• 支持自定义 size 图标尺寸
• 支持自定义 activeColor / inactiveColor 颜色配置
• 内置 WiFi SVG 图标（Base64 方案）

平台兼容性

uni-app(3.6.17)

uni-app x(3.6.17)

s-signal 信号强度图标组件

🚀 基础用法

1️⃣ Cellular 信号

<s-signal type="cellular" :level="3" />

2️⃣ WiFi 信号

<s-signal type="wifi" :level="2" />

🎛 Props 参数说明

🎨 自定义颜色示例

<s-signal
  type="wifi"
  :level="4"
  :size="24"
  activeColor="#1677ff"
  inactiveColor="#d9d9d9"
/>

📶 level 等级说明

超出范围的值建议在业务层自行控制为 0-4。

🧩 渲染机制说明

Cellular 模式

• 使用 flex + 动态高度柱状条实现
• 通过 backgroundColor 控制激活与未激活状态

WiFi 模式

• 使用内联 SVG
• 每一层信号弧线单独通过 :fill 绑定颜色
• 通过 level >= n 控制激活层级

📱 适配说明

• 兼容 Vue 3 <script setup>
• 支持 uni-app / H5 / 小程序（使用 <view> 标签结构）
• SVG 方式不依赖 base64，支持动态颜色

⚠️ 注意事项

• size 仅对 wifi 生效，cellular 高度固定为 16px
• 若需统一尺寸控制，可自行扩展 cellular 的高度参数化
• 建议确保 level 为整数