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>

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

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

相关文章

深度解读F5:从企业级负载均衡到云原生应用服务

上世纪九十年代&#xff0c;Internet 的快速发展催生了大量在线网站&#xff0c;Web 访问量迅速提升。在互联网泡沫破灭以前&#xff0c;这个领域基本是围绕如何对 Web 网站进行负载均衡与优化。因而在早期&#xff0c;也会有“Web 交换机”的说法。从1997年 F5 发布了 BIG-IP …

黑马JVM总结(二十五)

&#xff08;1&#xff09;字节码指令-cinit 构造方法可以分为两类&#xff0c;一类是cinit 一类init cinit是整个类的构造方法 putstatic&#xff1a;进行static变量的赋值&#xff0c;是到常量池里找到名字一个叫做i的变量 &#xff08;2&#xff09;字节码指令-init in…

JimuReport积木报表 v1.6.2 版本正式发布—开源免费的低代码报表

项目介绍 一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完成报…

mysql面试题2:说一说MySQL的架构设计?一条 MySQL 语句执行的步骤?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:说一说MySQL的架构设计? MySQL的架构设计主要包括以下几个组件: 连接器(Connector):负责与客户端建立连接,并进行身份验证和授权。 查询缓存…

BFS专题7 多终点迷宫问题

题目&#xff1a; 样例&#xff1a; 输入 3 3 0 0 0 1 0 0 0 1 0 输出 0 1 2 -1 2 3 -1 -1 4 思路&#xff1a; 单纯的 BFS 迷宫问题&#xff0c;只是标记一下每个点的 step&#xff0c;注意初始化答案数组都为 -1. 代码详解如下&#xff1a; #include <iostream> #…

常用接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…

五、3d场景的卡片展示的创建

在我们3d的开发中&#xff0c;对某一些建筑和物体进行解释说明是非常常见的现象&#xff0c;那么就不得不说卡片的展示了&#xff0c;卡片展示很友好的说明了当前物体的状态&#xff0c;一目了然&#xff0c;下面就是效果图。 它主要有两个方法来实现&#xff0c;大量的图片建议…

最近很火的AIGC人工智能之AI赋能运营(巧用ChatGPT轻松上手新媒体)

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…

阿里云服务器技术创新、网络技术和数据中心技术说明

阿里云服务器技术创新、网络技术创新、数据中心技术创新和智能运维&#xff1a;云服务器方升架构、自研硬件、自研存储硬件AliFlash和异构计算加速平台&#xff0c;以及全自研网络系统技术创新和数据中心巴拿马电源、液冷技术等技术创新说明&#xff0c;阿里云百科分享阿里云服…

算法-堆/多路归并-查找和最小的 K 对数字

算法-堆/多路归并-查找和最小的 K 对数字 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/find-k-pairs-with-smallest-sums/description/?envTypestudy-plan-v2&envIdtop-interview-150 1.2 题目描述 2 优先级队列构建大顶堆 2.1 思路 将两个数字的和放入大…

Spring面试题23:Spring支持哪些事务管理类型?Spring框架的事务管理有哪些优点?你更倾向用哪种事务管理类型?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring支持哪些事务管理类型? Spring 支持以下几种事务管理类型: 编程式事务管理:通过在代码中显式地使用事务管理 API(如 TransactionTempla…

英飞凌 Tricore 架构中断系统详解

本文以TC3系列MCU为例&#xff0c;先来了解中断源是如何产生的&#xff0c;再看一下CPU是如何处理中断源的。 AURIX TC3XX的中断路由模块 Interrupt Router (IR) 在TC3中&#xff0c;中断既可以被CPU处理&#xff0c;也可以被DMA处理&#xff0c;所以手册中不再把中断称为中断…

Spring 学习(九)整合 Mybatis

1. 整合 Mybatis 步骤 导入相关 jar 包 <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><dependency>…

软件测试/测试开发丨岗位内推-58同城岗位开放~

58同城-测试工程师 岗位职责 1.参与需求分析、设计评审&#xff0c;制定测试计划&#xff0c;设计测试用例&#xff0c;搭建测试环境&#xff1b; 2.执行各级别和类型的测试&#xff0c;参与互联网测试的全流程&#xff1b; 3.借助最前沿的研发技术和理念&#xff0c;通过测…

短视频矩阵源码saas版开发---技术成品打磨

短视频矩阵源码saas版开发---技术成品打磨 企业要不要做抖音&#xff1f; 我的答案是要&#xff0c;而且要快&#xff0c;原因有以下几点&#xff1a; 1. 抖音高速增长未停&#xff0c;流量红利还未完全释放完&#xff0c;仍然有增长空间&#xff1b; 2. 抖音变现能力越来越…

《家的温暖,国庆团圆》

目录 &#x1f4d6; 引言 &#x1f4dd; 假日放假表 &#x1f365; 中秋节 &#x1f4da; 中秋节的由来 中秋节的仪式 &#x1f4da; 赏月 &#x1f4da; 吃月饼 &#x1f4da; 猜灯谜 &#x1f4da; 品茶赏花 &#x1f4da; 舞狮龙 &#x1f4da; 中秋节的感触 &am…

C++项目笔记--基于TensorRT搭建一个YoloV5服务器

目录 1--项目描述 2--项目地址 3--编译运行 4--测试结果 5--补充说明 1--项目描述 ① 基于 C/S 模型来构建 TCP 服务器和 TCP 客户端。 ② 使用 Epoll 来监控服务器和客户端之间的连接。 ③ 服务器和客户端约定使用相同的数据传输协议&#xff0c;头部分别使用 4 个字节来…

OpenCV查找和绘制轮廓:findContours和drawContours

1 任务描述&#xff1a; 绘制图中粗线矩形的2个边界&#xff0c;并找到其边界的中心线 图1 原始图像 2.函数原型 findContours( InputOutputArray image, OutputArrayOfArrays contours, OutputArray hierarchy, int mode, …

【C++】string 之 find、rfind、replace、compare函数的学习

前言 上篇文章&#xff0c;我们学习了assign、at、append这三个函数 今天&#xff0c;我们来学习find、 函数 find函数 引入 我们都知道&#xff0c;find函数可以是string类中&#xff0c;用于查找字符或者字符串的函数 也可以是&#xff0c;<algorithm>头文件中&am…

什么是Selenium?使用Selenium进行自动化测试!

你知道什么是 Selenium 吗&#xff1f;你知道为什么要使用它吗&#xff1f;答案就在本文中&#xff0c;很高兴能够与你共飧。 自动化测试正席卷全球&#xff0c;Selenium 认证是业界最抢手的技能之一。 什么是 Selenium&#xff1f; Selenium 是一种开源工具&#xff0c;用于…