Vue+Element UI el-progress进度条内显示自定义数字及文字

需求

进度条内展示 具体的数字值,进度条外展示 百分比数值

在这里插入图片描述

数据

data() {return {reNum: 3214,rePer:40,warmPer: 40,warmNum:2132,}}

因为样式要求,显示的百分数也是自己写的哈 ,没有用进度条自带的

代码

    <div class="pick"><div class="proItem warmPk"><el-progress:text-inside="true":stroke-width="20":show-text="true":percentage="warmPer":format="format(warmNum)"color="#fff"></el-progress><div class="pro-num proTwoBK">{{ warmPer }}%</div></div><div class="proItem rePick"><el-progress:text-inside="true":show-text="true":stroke-width="20":percentage="rePer":format="format(reNum)"color="#fff"></el-progress><div class="pro-num proBK">{{ rePer }}%</div></div></div>

js方法

  format(row) {return () => {return row ? row : 0;};},

css样式代码

   .pick {margin-top: 1vh;.proItem {display: flex;align-items: center;justify-content: space-between;margin-left: 1.5vh;width: 100%;}.pro-num {font-weight: 700;font-size: 1.9vh;width: 19%;}.proBK {color: #40E9FF;}.proTwoBK {color: #F57A47}.warmPk {::v-deep.el-progress-bar__inner {background: #F67700 !important;}}.rePick {margin-top: 1.3vh;::v-deep.el-progress-bar__inner {background: #49AAE5 !important;}}::v-deep.el-progress-bar__outer {background: #353536 !important;}::v-deep.el-progress-bar {width: 100% !important;}::v-deep.el-progress-bar__inner {border-radius:10px !important;}::v-deep.el-progress {text-align: center !important;width: 81% !important}::v-deep.el-progress-bar__innerText {font-size: 1.4vh !important;font-weight: 700 !important;color: #fff !important;}}

2.使用插槽

<template><el-progress:percentage="50":stroke-width="26"text-inside:format="formatText"><template #text><span>自定义文字</span></template></el-progress>
</template><script>
export default {methods: {formatText(percentage) {// 如果需要,可以在这里根据percentage值来动态显示文字return `${percentage}% 自定义文字`;}}
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/5794.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(八)Servlet教程——创建Web项目以及Servlet的实现

1. 打开Idea编辑器 2. 点击界面上的“新建项目”按钮 3. 设置好项目名称和位置 应用服务器选择之前设置好的Tomcat服务器 构建系统默认选择Maven 4. 点击“下一步”按钮 5. 点击“完成”按钮&#xff0c;Idea就创建好了项目&#xff0c;创建完成后的目录结构如下图所示 6. 此…

网络安全之弱口令与命令爆破(中篇)(技术进阶)

目录 一&#xff0c;什么是弱口令&#xff1f; 二&#xff0c;为什么会产生弱口令呢&#xff1f; 三&#xff0c;字典的生成 四&#xff0c;使用Burpsuite工具验证码爆破 总结 笔记改错 一&#xff0c;什么是弱口令&#xff1f; 弱口令就是容易被人们所能猜到的密码呗&a…

笨蛋学C++【C++基础第十弹】

C基础第十弹 CSTL教程vector容器&#xff08;有限扩容&#xff09;vector构造函数vector赋值方式vector的容量和大小vector的插入和删除vector获取元素vector互换容器vector预留空间&#xff08;大量数据&#xff09;vector遍历方法容器自定义数据类型vector迭代容器 strng容器…

Java各种List实现类以及特点

目录 1. ArrayList 2. LinkedList 3. Vector 4. Stack 5. CopyOnWriteArrayList 1. ArrayList 特性: 基于动态数组实现。提供快速的随机访问能力。在列表末尾添加/删除元素非常快&#xff0c;但在列表中间插入/删除元素可能需要移动元素&#xff0c;较慢。每次自动增长时…

STM32标准库编译前置条件配置

本文基于stm32f104系列芯片&#xff0c;记录编程代码前需要的操作&#xff1a; 添加库文件 在ST官网下载标准库STM32F10x_StdPeriph_Lib_V3.5.0&#xff0c;解压后&#xff0c;得到以下界面 启动文件 进入Libraries&#xff0c;然后进入CMSIS&#xff0c;再进入CM3&#xff…

Debian 12 -bash: netstat: command not found 解决办法

问题表现&#xff1a; debian 12系统中&#xff0c;不能使用 netstat命令 处理办法&#xff1a; netstat 命令就的net-tools中&#xff0c;把net-tools工具安装上就好了。 apt-get install netstat 安装之后就可以使用netstat 命令了&#xff0c;如查询端口情况&#xff1a; …

ArrayList常考面试题

在Java面试中&#xff0c;关于ArrayList的面试题可能涵盖多个方面&#xff0c;包括其数据结构、扩容机制、性能特点等。以下是一些常见的ArrayList面试题&#xff1a; ArrayList的数据结构是什么&#xff1f; ArrayList的底层数据结构是动态数组。它是一个可以动态调整大小的数…

什么是内存缓存 DDoS 攻击,改如何防护

DDOS 缓存服务器是世界上许多大型网站&#xff08;如 Facebook、Flickr、Twitter、Reddit、YouTube、Github&#xff09;使用的一项技术。主要作用是利用DDOS缓存技术处理的动态网页应用&#xff0c;可以减轻网站数据库的压力&#xff0c;当这些网站出现大规模连接请求时&#…

前端面试题 - 如何实现promise?

前端面试题 - 如何实现promise&#xff1f; 通过构造函数生成一个promise对象&#xff0c;该构造函数有一个延时函数参数通过promise.then()或promise.catch()方法实现结果获取then函数和catch函数可以链式调用 function MyPromise(func) {this.status pending;this.res ;t…

python学习之词云图片生成

代码实现 import jieba import wordcloudf open("D:/Pythonstudy/data/平凡的世界.txt", "r", encoding"utf-8") t f.read() print(t) f.close() ls jieba.lcut(t) txt " ".join(ls)w wordcloud.WordCloud(font_path"D:/cc…

如何利用有限的数据发表更多的SCI论文?——利用ArcGIS探究环境和生态因子对水体、土壤和大气污染物的影响

原文链接&#xff1a;如何利用有限的数据发表更多的SCI论文&#xff1f;——利用ArcGIS探究环境和生态因子对水体、土壤和大气污染物的影响https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247602528&idx6&snc89e862270fe54239aa4f796af07fb71&chksmfa82…

【前端探索者:从零到精通的Web前端实战专栏】

🚀 在这个代码编织梦想的时代,Web前端作为互联网的颜值担当,正以日新月异的速度重塑数字世界。想要在前端江湖里游刃有余,你需要的不仅仅是一把锋利的剑,更是一套完整的武功秘籍!今天,我们就为你揭开【Web前端】专栏的神秘面纱,带你从菜鸟到大神,一飞冲天! 📚 专栏…

基于Spring Boot的校园闲置物品交易网站设计与实现

基于Spring Boot的校园闲置物品交易网站设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 系统功能界面图&#xff0c;在系统首页可以查看…

ClickHouse高原理与实践

ClickHouse高原理与实践 1 ClickHouse的特性1.1. OLAP1.2. 列式存储1.3. 表引擎1.4. 向量化执行1.5. 分区1.6. 副本与分片1.7 其他特性 2. ClickHouse模块设计2.1 Parser分析器与Interpreter解释器2.2 Storage2.3 Column与Field2.4 DataType2.5 Block2.6 Cluster与Replication …

JavaScript面试题(三)

56.不使用promise能否把请求数据返回出来&#xff1f; async/awaitgenerator函数回调函数(类似于react中的子父传值) 57.async和await async和await是ECMAScript 2017 (ES8)标准引入的新特性&#xff0c;用于简化异步操作。async&#xff1a;用于修饰一个异步操作的函数&…

C#面试题目含参考答案(三)

前言 面试是应聘一个工作岗位的环节&#xff0c;来考察一个人的工作能力与综合素质。在应聘C#程序员或与C#相关岗位时&#xff0c;我们都会被问到一些与.NET、C#、数据库、业务知识或编程思想等问题。本文列举一些问题及提供参考答案&#xff0c;题目&#xff08;三&#xff09…

ROS2专栏(三) | 理解ROS2的动作

​ 1. 创建一个动作 目标&#xff1a; 在ROS 2软件包中定义一个动作。 1.1 新建包 设置一个 workspace 并创建一个名为 action_tutorials_interfaces 的包&#xff1a; mkdir -p ros2_ws/src #you can reuse existing workspace with this naming convention cd ros2_ws/s…

[1673]jsp在线考试管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 在线考试管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…

2024-05-01 区块链-比特币-相关文档

摘要: 2024-05-01 区块链-比特币-文档-记录 比特币: https://github.com/bitcoin/bitcoin https://bitcoincore.org/ https://bitcoin.org/ https://github.com/bitcoin-dot-org/developer.bitcoin.org https://developer.bitcoin.org/ 简介 《Bitcoin Developer Guide》中文…

C语言什么是指向函数的指针?

一、问题 指针可以指向普通数值、数组&#xff0c;还可以指向指针&#xff0c;那么可以指向函数吗&#xff1f;答案是可以&#xff0c; 那么它是什么样的呢&#xff1f; 二、解答 ⼀个函数在编译时被分配⼀个⼊⼜地址&#xff0c;这个地址就称为函数的指针。所以&#xff0c;可…