更新记录

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

1. 首次发布：双色比例进度条组件（A/B 两段占比自动补足）
2. 斜切分隔线可开关，斜切延展量与缝隙宽度可调（slant / slantTopExtend / slantBottomExtend / slantGap）
3. 文案配置灵活：标签可隐藏、可自定义（labelA / labelB）、百分比精度（precision）、去零（trimZero）、后缀（percentSuffix）、标签颜色/字号/字重/间距均可配
4. 轨道样式可配：高度、圆角、底色；数值过渡动画可开关、时长可调
5. 提供 labelA / labelB 具名插槽，支持完全自定义标签内容

平台兼容性

uni-app(5.24)

其他

Line Progress 双色比例进度条

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

🚀 功能特性

• ✅ A/B 双段占比：只需传 valueA，B 侧自动补足为 100 - valueA
• ✅ 斜切分隔可配置：分隔线可开关（slant），斜切角度（延展量）与缝隙宽度均可调
• ✅ 文案灵活（国际化友好）：左右标签可隐藏/自定义、百分比精度/去零/后缀可调、标签颜色字号字重间距可配
• ✅ 轨道样式可配：轨道高度、圆角、底色均可配置
• ✅ 数值动画：占比变化时平滑过渡，可开关、可调速
• ✅ 自定义插槽：提供 labelA / labelB 具名插槽，可完全自定义标签内容
• ✅ 平滑替换：valueA / colorA / colorB 用法与原 m-line-progress 完全一致，可直接替换使用
• ✅ 多端适配：纯 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" />

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

🔧 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.0.0（2026-09-08）

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

祝您使用愉快！ 🎉