element中使用el-steps 进度条效果demo(整理)


<template><div class="margin-top20"><!-- align-center 不要居中就去掉 --><!-- process-status 这几个参数值:改变颜色 wait / process / finish / error / --><!-- active 到第几个是绿色 --><el-steps :space="200" :active="active" finish-status="success" :process-status="status" align-center><!-- <el-step title="步骤 1" description="循环进度" v-for="(item,index) in processList" :key="index"></el-step> --><el-step title="步骤 1" description=""></el-step><el-step title="步骤 2" description=""></el-step><el-step title="步骤 3" description=""></el-step><el-step title="步骤 4" description=""></el-step><el-step title="步骤 5" description="这是一段很长很长很长的描述性文字"></el-step></el-steps></div>
</template><script>export default {data() {return {active: 2, //第几个1开始status: 'finish', //进度颜色值--wait / process / finish / error /};},mounted() {//这里可以根据实际结果判断-判断颜色-wait / process / finish / error /if (this.active == 2) {this.status = 'error';}},methods: {}}
</script>
相关文章:
element中使用el-steps 进度条效果demo(整理)
<template><div class"margin-top20"><!-- align-center 不要居中就去掉 --><!-- process-status 这几个参数值:改变颜色 wait / process / finish / error / --><!-- active 到第几个是绿色 --><el-steps :space&qu…...
038:mapboxGL 旋转地图(rotateTo)
第038个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中旋转地图。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共68行)相关API参考:专栏目标示例效果 配置方式 1)查看基础设置:https://xiaozhuan…...
java遇到的问题
java遇到的问题 Tomcat与JDK版本问题 当使用Tomcat10的版本用于springmvc借用浏览器调试时,使用JDK8浏览器会报异常。 需要JDK17(可以配置多个JDK环境,切换使用)才可以使用,配置为JAVA_HOME路径,否则&a…...
LLM(二)| LIMA:在1k高质量数据上微调LLaMA1-65B,性能超越ChatGPT
本文将介绍在Lit-GPT上使用LoRA微调LLaMA模型,并介绍如何自定义数据集进行微调其他开源LLM 监督指令微调(Supervised Instruction Finetuning) 什么是监督指令微调?为什么关注它? 目前大部分LLM都是decoder-only&…...
Android AMS——创建Application(七)
与在 App 内部启动一个 Activity 的不同之处在于,点击桌面 Launcher 首次启动一个应用程序的时候,会先去创建一个该应用程序对应的进程,然后执行 ActivityThread 的 main() 方法去创建该应用对应的 Application,然后再去启动首页 Activity。前面已经分析了进程的创建和启动…...
html 边缘融合加载
html 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>边缘融合加载</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;padding-bottom: 80px;b…...
ElasticSearch - 在 微服务项目 中基于 RabbitMQ 实现 ES 和 MySQL 数据异步同步(考点)
目录 一、数据同步 1.1、什么是数据同步 1.2、解决数据同步面临的问题 1.3、解决办法 1.3.1、同步调用 1.3.2、异步通知(推荐) 1.3.3、监听 binlog 1.3、基于 RabbitMQ 实现数据同步 1.3.1、需求 1.3.2、在“酒店搜索服务”中 声明 exchange、…...
Springboot+vue的企业人事管理系统(有报告),Javaee项目,springboot vue前后端分离项目。
演示视频: Springbootvue的企业人事管理系统(有报告),Javaee项目,springboot vue前后端分离项目。 项目介绍: 本文设计了一个基于Springbootvue的前后端分离的企业人事管理系统,采用M(model&am…...
初识Java 11-1 函数式编程
目录 旧方式与新方式 lambda表达式 方法引用 Runnable 未绑定方法引用 构造器方法引用 函数式接口 带有更多参数的函数式接口 解决缺乏基本类型函数式接口的问题 本笔记参考自: 《On Java 中文版》 函数式编程语言的一个特点就是其处理代码片段的简易性&am…...
【Ambari】银河麒麟V10 ARM64架构_安装Ambari2.7.6HDP3.3.1问题总结
🍁 博主 "开着拖拉机回家"带您 Go to New World.✨🍁 🦄 个人主页——🎐开着拖拉机回家_大数据运维-CSDN博客 🎐✨🍁 🪁🍁 希望本文能够给您带来一定的帮助🌸文…...
李宏毅机器学习第一课(结尾附作业模型详细分析)
机器学习就是让机器找一个函数f,这个函数f是通过计算机找出来的 如果参数少的话,我们可以使用暴搜,但是如果参数特别多的话,我们就要使用Gradient Descent Regression (输出的是一个scalar数值) Classification (在…...
对日项目工作总结
从18年8月到23年中秋节,目前已经入职主营对日车载项目的公司满5年了,一般来说,在一家公司工作工作超过3年,如果是在比较大型以及流程规范的公司,那么该公司的工作流程,工作思维会深深地烙印在该员工的脑海中…...
设计模式探索:从理论到实践的编码示例 (软件设计师笔记)
😀前言 设计模式,作为软件工程领域的核心概念之一,向我们展示了开发过程中面对的典型问题的经典解决方案。这些模式不仅帮助开发者创建更加结构化、模块化和可维护的代码,而且也促进了代码的复用性。通过这篇文章,我们…...
【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问
目录 前言 1. 本地环境服务搭建 2. 局域网测试访问 3. 内网穿透 3.1 ubuntu本地安装cpolar 3.2 创建隧道 3.3 测试公网访问 4. 配置固定二级子域名 4.1 保留一个二级子域名 4.2 配置二级子域名 4.3 测试访问公网固定二级子域名 前言 网:我们通常说的是互…...
在cesuim上展示二维模型
前提问题:在cesuim上展示二维模型 解决过程: 1.获取或定义所需变量 2.通过window.cesium.viewer.imageryLayers.addImageryProvider和new Cesium.UrlTemplateImageryProvider进行建模 3.传入url路径后拼接{z}/{x}/{y}.png 4.聚焦到此模型window.ces…...
c/c++中如何输入pi
标准的 C/C 语言中没有π这个符号及常量,一般在开发过程中是通过开发人员自己定义这个常量的,最常见的方式是使用宏定义: 方法1:#define pi 3.1415926 方法2:使用反三角函数const double pi acos(-1.0);...
python爬虫:JavaScript 混淆、逆向技术
Python爬虫在面对JavaScript混淆和逆向技术时可能会遇到一些挑战,因为JavaScript混淆技术和逆向技术可以有效地阻止爬虫对网站内容的正常抓取。以下是一些应对这些挑战的方法: 分析网页源代码:首先,尝试分析网页的源代码…...
Vue error:0308010C:digital envelope routines::unsupported
vue项目,npm run dev的时候出现:Error: error:0308010C:digital envelope routines::unsupported vue项目,npm run dev的时候出现:Error: error:0308010C:digital envelope routines::unsupported 这个是node的版本问题。我的nod…...
gitee 远程仓库操作基础(一)
git remote add <远程仓库名> <仓库远程地址> :给远程仓库取个别名,简化一大堆字符串操作 git remote add origin xxx.git :取个Origin名字 git remote -v :查看本地存在的远程仓库 git pull <远程仓库名><远程分支名>:<本地分支名> 相同可取消…...
DRM全解析 —— ADD_FB2(0)
本文参考以下博文: DRM驱动(四)之ADD_FB 特此致谢! 在笔者之前的libdrm全解析系列文章中,讲到了drmIoctl(fd, DRM_IOCTL_MODE_ADDFB, &f)以及其封装函数drmModeAddFB。对应的文章链接为: libdrm全解…...
vs code 实现source insight中的快捷键功能
1.自定义快捷键连续两组快捷键CtrlK CtrlS打开键盘快捷键定义界面修改向前向后的快捷键。ctrlu删除当前行复制当前行到下面2.增加bookmarks功能扩展部分装插件,定义快捷键ctrlm增加标签可以修改标签3.多行移动多行向上移动,向下移动Windows/Linux 用 Alt…...
别再手动调坐标轴了!Excel两列数据一键生成折线图的正确姿势(附散点图对比)
Excel两列数据可视化:折线图与散点图的精准选择与高效操作 每次月度汇报前,你是否也经历过这样的场景?面对两列关键业务数据,明明只是简单画个趋势图,却在调整坐标轴上耗费半小时——选错图表类型导致横纵坐标错位&…...
极域电子教室破解神器:JiYuTrainer 让课堂学习更自由高效
极域电子教室破解神器:JiYuTrainer 让课堂学习更自由高效 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 你是否厌倦了在计算机课堂上被极域电子教室完全控制…...
AI 开发实战:需求变更后,如何让 AI 自动补回归范围
AI 开发实战:需求变更后,如何让 AI 自动补回归范围 一、这个问题为什么值得专门拿出来做? 在 AI 工程落地里,真正拖慢团队的往往不是模型本身,而是流程和协作方式没有跟上。 围绕“需求变更后,如何让 AI 自…...
纯粹直播:革新直播观看体验的一站式跨平台解决方案
纯粹直播:革新直播观看体验的一站式跨平台解决方案 【免费下载链接】pure_live 纯粹直播:哔哩哔哩/虎牙/斗鱼/快手/抖音/网易cc/M38自定义源应有尽有。 项目地址: https://gitcode.com/gh_mirrors/pur/pure_live 您是否曾为在多个直播平台间频繁切换而感到困…...
Photoshop PS 2026 保姆级图文安装教程
前言 在当今数字创意领域,Photoshop作为行业标准的图像处理软件,掌握它的安装与使用已成为设计师、摄影师及创意工作者的必备技能。本文为您提供Photoshop 2026最新版本的详细安装指南,无论您是初学者还是需要更新软件的专业人士,…...
Linux内核观测与跟踪的利器BPF环境测试
内核观测工具BPF实例BPF介绍BPF实例使用 BCC 工具集(最简单)使用 libbpf BPF 骨架(更接近生产环境)使用 bpftool 直接加载(适合调试)总结BPF介绍 BPF 最初诞生于 1992 年,是一种用于网络数据包…...
5分钟掌握Axure RP多版本语言包管理:从部署到定制全流程
5分钟掌握Axure RP多版本语言包管理:从部署到定制全流程 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包,不定期更新。支持 Axure 9、Axure 10。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn …...
【跟韩工学Ubuntu第5课】-第5章 网络管理:Netplan、路由与防火墙-004篇-Ubuntu Server 网络管理:进阶配置、优化与实战诊断
文章目录 Ubuntu Server 网络管理:进阶配置、优化与实战诊断 (扩容优化版 | 适配高校教学+生产实战 | 30页核心内容) 5.1 网络基础:深入理解与实践查看(扩容+优化) 一、核心概念进阶(新增计算案例+场景区分) 二、必备诊断命令(新增高频参数+中文注释) 三、IPv6 完整配…...
PROFINET通信避坑指南:PN/PN耦合器在S7系列PLC中的3种典型应用场景解析
PROFINET通信避坑指南:PN/PN耦合器在S7系列PLC中的3种典型应用场景解析 在工业自动化领域,PROFINET通信的稳定性和可靠性直接关系到生产线的运行效率。PN/PN耦合器作为跨子网通信的关键设备,其配置方式的选择往往让工程师陷入纠结。本文将深入…...
