更新记录

1.1.1（2026-10-12） 下载此版本

1. 同步 README 使用说明、Props 和示例代码，统一补充 theme 用法
2. 本次仅文档更新，不改变组件运行行为和 1.1.0 暗色适配逻辑

1.1.0（2026-10-12） 下载此版本

1. 新增 theme 属性（light / dark，默认 light），由外部传入主题
2. 暗色模式下默认轨道底色适配为深色
3. 自定义 trackColor 时仍优先使用外部值，默认 light 行为不变

1.0.1（2026-09-09） 下载此版本

1. showLabel 默认值由 false 调整为 true：默认展示左右占比标签，无需展示时传 :show-label="false" 即可隐藏

平台兼容性

uni-app(5.24)

其他

Line Progress 双色比例进度条

一款基于 uni-app（Vue3）的双色比例进度条组件。用于展示两段占比（如买卖比例、盈亏比例），A/B 两段占比自动补足为 100%，支持斜切分隔、自定义文案与轨道样式，开箱即用。

🚀 功能特性

• ✅ A/B 双段占比：只需传 valueA，B 侧自动补足为 100 - valueA
• ✅ 斜切分隔可配置：分隔线可开关（slant），斜切角度（延展量）与缝隙宽度均可调
• ✅ 文案灵活（国际化友好）：默认显示左右占比标签，可隐藏或自定义、百分比精度/去零/后缀可调、标签颜色字号字重间距可配
• ✅ 轨道样式可配：轨道高度、圆角、底色均可配置
• ✅ 数值动画：占比变化时平滑过渡，可开关、可调速
• ✅ 自定义插槽：提供 labelA / labelB 具名插槽，可完全自定义标签内容
• ✅ 主题模式：支持 theme="light" / "dark"，由外部传入主题
• ✅ 多端适配：纯 view/text + clip-path 实现，适配 H5 / App-vue / 小程序

📦 安装引入

1. 将 uni_modules/line-progress 整个目录复制到项目的 uni_modules 目录下；
2. 开启 easycom 时可直接使用 <line-progress> 标签，无需手动引入；
3. 若未开启 easycom，可在页面中手动引入：

<script setup>
import LineProgress from "@/uni_modules/line-progress/components/line-progress/line-progress.vue";
</script>

🚀 快速开始

<template>
  <view>
    <!-- 基础用法：默认显示左右占比标签 -->
    <line-progress :value-a="60" :theme="theme" />

    <!-- 进阶用法：自定义颜色 / 文案 / 样式（不需要标签时传 :show-label="false"） -->
    <line-progress
      :value-a="33.333"
      :theme="theme"
      :precision="2"
      trim-zero
      label-a="盈利"
      label-b="亏损"
      color-a="#F5465D"
      color-b="#29CA8B"
      height="16rpx"
      :slant="false"
    />
  </view>
</template>

<script setup>
const theme = "dark"; // light / dark
</script>

🔧 Props 属性配置

数据

颜色

标签

轨道

分隔线

动画

🎨 插槽

<line-progress :value-a="60">
  <!-- 完全自定义标签内容（颜色/字号等跟随 labelColorA/labelColorB 与 labelFontSize 配置） -->
  <template #labelA>
    <text class="custom-a">买 60%</text>
  </template>
</line-progress>

注意：插槽只替换文字内容，标签的颜色 / 字号 / 字重 / 间距仍由 labelColorA、labelFontSize 等 props 控制。

🎨 样式自定义

组件内部类可在外部覆盖（scoped 样式需 :deep() 穿透）：

<style lang="scss" scoped>
:deep(.lp-track) {
  border: 1px solid #eee;
}
</style>

⚠️ 使用注意事项

1. 文案拼接：自动文案 = 格式化后的数值 + percentSuffix；传入 labelA / labelB 后不再自动拼接后缀
2. 数值钳制：valueA 会被钳制在 0~100，超出部分不参与占比计算（如传 120 会按 100 渲染）
3. 平台兼容：斜切分隔依赖 clip-path，H5 / App-vue 表现最佳，小程序端请按实际目标平台验证；nvue 不支持，请在 app-vue 中使用
4. 避免与组件标签同名：页面（<script setup>）内不要定义与标签同名的局部变量或函数（如 lineProgress），否则 Vue 编译时局部变量优先于 easycom 组件，<line-progress> 会被解析成该局部变量而非组件。请使用 openVerify、renderProgress 等不与标签冲突的命名
5. 实时数据：valueA 变化时色块与文案会自动更新并平滑过渡，可直接绑定 ws/轮询的实时占比数据

📞 更新日志

v1.1.1（2026-10-12）

• 📝 同步 README 使用说明、Props 和示例代码，统一补充 theme 用法
• 本次仅文档更新，不改变组件运行行为和 1.1.0 暗色适配逻辑

v1.1.0（2026-10-12）

• 🆕 新增 theme 属性（light / dark，默认 light），由外部传入主题
• 🌓 暗色模式下默认轨道底色适配为深色
• 兼容性：自定义 trackColor 优先，默认 light 行为不变

v1.0.1（2026-09-09）

• 🆕 showLabel 默认值由 false 调整为 true：默认展示左右占比标签；无需展示时可传 :show-label="false" 隐藏

v1.0.0（2026-09-08）

• 🎉 首个版本发布：双段占比自动补足、斜切分隔可调、标签/文案灵活配置、轨道样式可配、数值动画可配、自定义插槽

祝您使用愉快！ 🎉