element-ui progress 组件源码分享

devtools/2025/3/29 18:17:29/

progress 进度条组件源码分享,主要从以下两个方面:

1、progress 组件页面结构。

2、progress 组件属性。

一、组件页面结构。

二、组件属性。

2.1 percentage 百分比(必填),类型为 number,可选值 0-100,默认 0。

2.2 type 进度条类型,类型为 string,可选值 line/circle/dashboard,默认 line。

 

2.3 stroke-width 进度条的宽度,单位 px,类型为 number,默认值 6。

2.4 text-inside 进度条显示文字内置在进度条内(只在 type=line 时可用),类型为 boolean,默认 false。

2.5 status 进度条当前状态,类型为 string,可选值 success/exception/warning,无默认值。

2.6 color 进度条背景色(会覆盖 status 状态颜色),类型为 string/function/array,无默认值。

2.7 width 环形进度条画布宽度(只在 type 为 circle 或 dashboard 时可用),类型为 number,默认 126。

2.8 show-text 是否显示进度条文字内容,类型为 boolean,默认 true。

2.9 stroke-linecap circle/dashboard 类型路径两端的形状,类型为 string,可选值 butt/round/square,默认值 round。

2.10 format 指定进度条文字内容,类型为 function(percentage),无默认值。

2.11 define-back-color 指定进度条底色(支持 hex 格式),类型为 string,无默认值。

2.12 text-color 指定进度条字体颜色(支持 hex 格式),类型为 string,无默认值。


http://www.ppmy.cn/devtools/169079.html

相关文章

嵌入式开发--Keil MDK仿真时System Viewer不显示寄存器选项--第2篇

缺少SFR文件 在用Keil开发时,特别是很久之前的工程,如果开发环境发生变化,就有可能出现调试时不显示寄存器的问题,初步解决可以看这一篇:嵌入式开发–Keil MDK仿真时System Viewer不显示寄存器选项,但有时…

Redis + 布隆过滤器解决缓存穿透问题

Redis 布隆过滤器解决缓存穿透问题 1. Redis 布隆过滤器解决缓存穿透问题 📌 什么是缓存穿透? 缓存穿透指的是查询的数据既不在缓存,也不在数据库,导致每次查询都直接访问数据库,增加数据库压力。 例如&#xff1…

Node.js系列(1)--架构设计指南

Node.js架构设计指南 🏗️ 引言 Node.js作为一个高性能的JavaScript运行时环境,其架构设计对于构建可扩展的服务端应用至关重要。本文将深入探讨Node.js的架构设计原则、最佳实践和实现方案。 架构概述 Node.js架构主要包括以下方面: 事…

SpringBoot整合MQTT最详细版(亲测有效)

一、导入pom.xml依赖 <!--mqtt依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-integration</artifactId></dependency><dependency><groupId>org.springframework.in…

Git 分支使用规范全解(多人协作开发适用)

🚀 Git 分支使用规范全解(多人协作开发适用) 本文将为你梳理一套清晰、标准、适合企业/团队使用的 Git 分支管理策略,适用于前后端、边缘端、AI项目等多种场景。 🧩 为什么要规范分支管理? 防止多人协作混乱、冲突频发清晰区分:开发中 / 待发布 / 已上线 的版本快速定…

「低延迟+快速集成:Amazon IVS如何重塑实时互动视频体验?」

引言&#xff1a;实时视频的爆发与开发痛点 随着直播电商、在线教育、云游戏的兴起&#xff0c;实时视频互动成为用户体验的核心。但自建视频服务面临高成本、高延迟、运维复杂等挑战。Amazon IVS&#xff08;Interactive Video Service&#xff09;作为亚马逊云科技推出的全托…

anythingLLM之stream-chat问题

1、anythingLLM提供的stream-chat的api 2、anything页面调用的stream-chat 两个接口传参一致&#xff0c;但是返回的数据页面调用的正确&#xff0c; 接口调用的明显不对&#xff0c;不知为何。 3、下面是postman不通过接口调用 4、java代码实现同一数据 /api/v1/workspace…

清晰易懂的 PHP 安装与配置教程

初学者也能看懂的 PHP 安装与配置教程 本教程将手把手教你如何在 Windows 系统上安装 PHP&#xff0c;并配置 Composer&#xff08;PHP 的依赖管理工具&#xff09;的缓存位置&#xff0c;即使你是零基础小白&#xff0c;也能轻松完成&#xff01; 一、准备工作 操作系统&…