vue3-progress

简介

这是一个基于Vue 3的进度条组件，支持多个段落显示，并且每个段落都可以配置不同的颜色。当鼠标悬停在某个段落上时，会显示一个提示信息（tooltip），展示该段落的百分比值或自定义内容。

- 支持多段进度条，每段可设置不同颜色。
- 鼠标悬停时显示tooltip，可以自定义tooltip的内容。
- 第一段和最后一段具有圆角设计。
- 使用Flex布局，易于嵌入到任何页面中。

安装

你可以通过 npm 或 yarn 安装此组件：
npm install multi-color-progress
yarn add multi-color-progress

使用示例

import ProgressBar  from 'multi-color-progress'
<ProgressBar :segments="segments" >
	<template #tooltip="{segment}">
    	 <div>
          <p>Value: {{ segment.value }}</p>
          <p>Color: {{ segment.color }}</p>
          <p>proportion: {{ segment.proportion }}</p> //占比 百分比
        </div>
    </template>
</ProgressBar>

const  segments= [
        { value: 140, color: '#ff6b6b' },
        { value: 330, color: '#4ecdc4' },
        { value: 30, color: '#f79f1f' }
]
tips: value:number,color:string

属性

| 属性名 | 类型 | 必填 | 默认值 | 描述 | | ---------- | ------- | ---- | ------ | ---------------------------------------- | | segments | Array | true | null | 渲染数据，接收value:number，color:string |

插槽

| 名称 | 说明 | 默认值 | | --------- | ---------------- | ----------- | | tooltip | 自定义悬浮文本 | 当前占比% |