< elementUI组件样式及功能补全: 实现点击steps组件跳转对应步骤 >
文章目录
- 👉 前言
- 👉 一、效果演示
- 👉 二、点击steps跳转效果实现
- 👉 三、实现案例
- 往期内容 💨
👉 前言
在 Vue + elementUi 开发中,elementUI中steps步骤条组件只提供了change方法,并未提供各个步骤的点击跳转方法。在实际项目使用中,如果步骤条并非一步一步进行,而是有步骤跳转。那么就需要自己去自定义DIY了。
接下来,简单阐述下,开发中使用方法!
👉 一、效果演示
话不多说,先上效果图! 白嫖万岁!当然,如果有帮助,希望不要吝啬你的点赞呀!

👉 二、点击steps跳转效果实现
通过为 el-step 添加 @click.native 属性,拦截标签原生点击事件!
注意:在vue3中 ‘.native’ 修饰符在vue3中被弃用了,
解决方法:把 ‘.native’ 换成 ‘.enter’
👉 三、实现案例
> HTML模板
<template>
<div class="stepBox"><div :class="'step-line' + (stepStatuList['开展整改'] ? ' isSuccess' : '')"></div><span :class="'el-icon-caret-top point num_'+ active"></span><el-steps:active="active"align-centerfinish-status="success"@change="stepChange"><el-steptitle="开展核实":status="active == 0 ? 'success' : stepStatuList['开展核实'] ? 'process' : 'wait'"@click.native="stepStatuList['开展核实'] ? stepClick(0) : () => {}":style="{cursor: (stepStatuList['开展核实'] ? 'pointer' : 'not-allowed')}"></el-step><el-steptitle="核实审核":status="active == 1 ? 'success' : stepStatuList['核实审核'] ? 'process' : 'wait'"@click.native="stepStatuList['核实审核'] ? stepClick(1) : () => {}":style="{cursor: (stepStatuList['核实审核'] ? 'pointer' : 'not-allowed')}"></el-step><el-steptitle="开展整改":status="active == 2 ? 'success' : stepStatuList['开展整改'] ? 'process' : 'wait'"@click.native="stepStatuList['开展整改'] ? stepClick(2) : () => {}":style="{cursor: (stepStatuList['开展整改'] ? 'pointer' : 'not-allowed')}"></el-step><el-steptitle="整改审核":status="active == 3 ? 'success' : stepStatuList['整改审核'] ? 'process' : 'wait'"@click.native="stepStatuList['整改审核'] ? stepClick(3) : () => {}":style="{cursor: (stepStatuList['整改审核'] ? 'pointer' : 'not-allowed')}"></el-step></el-steps></div>
</template>
> Js模板
stepClick(step) {this.active = step// this.stepChange(step)
},
// 步骤切换
stepChange(step) {this.multipleSelection = []this.toggleSelection([])this.$refs['params'].resetFields();this.$router.push({query:merge(this.$route.query,{'active':step})})this.getStepById()// if(step == 1) {// this.detailListType = '-1'// } else {// this.detailListType = '0'// }this.detailListType = '0'this.getColumnArray(() => {if((step === 0 || step === 2) && this.tableData.length === 0) {this.detailListType = '1'this.getColumnArray()}})
},
> CSS 模板
.stepBox {width: 80%;padding: 25px 0 15px;margin: 0 auto 0;position: relative;// border-top: 2px solid #a2dcff;// border-bottom: 2px solid #a2dcff;.point{color: #4298f3!important;font-size: 30px;position: absolute;top: 50px;}.point.num_0 {left: calc(100%/8 - 10px);}.point.num_1 {left: calc(100%/8*3 - 10px);}.point.num_2 {left: calc(100%/8*5 - 10px);}.point.num_3 {left: calc(100%/8*7 - 10px);}.point.num_4 {display: none;}.step-line {width: calc(50% - 5px);height: 30px;position: absolute;left: calc(100%/8);top: -15px;border: 2px solid #b3b3b3;border-bottom: 0;&::after {content: '>>';color: #b3b3b3;background: #fff;position: absolute;top: 10px;right: -16.5px;font-size: 18px;font-weight: bold;transform: rotate(90deg);}}.step-line.isSuccess {border: 2px solid #4298f3;border-bottom: 0;&::after {content: '>>';color: #4298f3;background: #fff;position: absolute;top: 10px;right: -16.5px;font-size: 18px;font-weight: bold;transform: rotate(90deg);}}
}/* 用于覆盖element的原样式 */
/deep/ {
.el-steps {display: flex;justify-content: center;position: relative;transition: all .4s;>div {&:nth-child(2) {.el-step__line {display: none;}}}.el-step__main {position: absolute;top: -28%;left: 45%;z-index: 20;.el-step__title {font-family: MicrosoftYaHei;font-size: 13px;color: #c1e6f3;text-align: center;font-weight: 600;}.el-step__title.is-success {color: #fff;}.el-step__title.is-wait {color: #fff;}.el-step__title.is-process {font-family: MicrosoftYaHei;font-size: 13.5px;color: #4298f3;text-align: center;font-weight: bold;}}.el-step__head.is-success {>.el-step__line {width: calc(100%);// position: relative;background: #4298f3;// &::after {// content: '>>';// color: #4298f3;// position: absolute;// top: -9px;// right: -28px;// font-size: 17px;// font-weight: bold;// }}}.el-step__icon is-text {}.el-step__line {width: calc(40%)!important;margin-left: calc(25% + 20px);height: 1.5px;z-index: 5;>.el-step__line-inner {display: none;}}.el-step__head.is-wait,.el-step__head.is-process{>.el-step__line {width: calc(100%);// position: relative;background: #b3b3b3;// &::after {// content: '>>';// color: #b3b3b3;// position: absolute;// top: -9px;// right: -28px;// font-size: 17px;// font-weight: bold;// }}}.el-step__icon-inner {display: block;position: absolute;left: 20px;}.el-step__head.is-process {.el-step__icon-inner {color: #4298f3;}}.el-step__head.is-wait {.el-step__icon-inner {color: #fff;}}.el-step__head.is-process {.el-step__icon.is-text {background-color: #fff;width: 60%;border-radius: 0;position: relative;text-align: left;&::after {content: "";position: absolute;right: -9.8px;width: 15px;height: 15px;background-color: #fff; /* 模块背景为透明 */border-color: #4298f3;border-style: solid;border-width: 2.2px 2.2px 0 0;margin: 300px auto;transform: rotate(45deg); /*箭头方向可以自由切换角度*/}&::before {content: "";position: absolute;left: -10.5px;width: 15px;height: 15px;background-color: #fff; /* 模块背景为透明 */border-color: #4298f3;border-style: solid;border-width: 2.2px 2.2px 0 0;border-radius: 2px;margin: 300px auto;transform: rotate(45deg); /*箭头方向可以自由切换角度*/}}}.el-step__head.is-success{.el-step__icon.is-text {background-color: #4298f3;width: 60%;border-radius: 0;position: relative;text-align: left;&::after {content: "";position: absolute;right: -10.8px;width: 17px;height: 17px;background-color: #4298f3; /* 模块背景为透明 */margin: 300px auto;transform: rotate(45deg); /*箭头方向可以自由切换角度*/}&::before {content: "";position: absolute;left: -10.5px;width: 17px;height: 17px;background-color: #fff; /* 模块背景为透明 */margin: 300px auto;transform: rotate(45deg); /*箭头方向可以自由切换角度*/}}}.el-step__head.is-wait {.el-step__icon.is-text {background-color: #b3b3b3;width: 60%;border-radius: 0;position: relative;text-align: left;&::after {content: "";position: absolute;right: -10.8px;width: 17px;height: 17px;background-color: #b3b3b3; /* 模块背景为透明 */margin: 300px auto;transform: rotate(45deg); /*箭头方向可以自由切换角度*/}&::before {content: "";position: absolute;left: -10.5px;width: 17px;height: 17px;background-color: #fff; /* 模块背景为透明 */margin: 300px auto;transform: rotate(45deg); /*箭头方向可以自由切换角度*/}}}.el-step__head.is-success,.el-step__head.is-process {color: #fff;border-color: #4298f3;// background: #4298f3;}
}
}
案例较为粗浅,仅供参考!
往期内容 💨
🔥 < CSDN周赛解析:第 28 期 >
🔥 < elementUi 组件插件: el-table表格拖拽修改列宽及行高 及 使用注意事项 >
🔥 < 每日小技巧:N个很棒的 Vue 开发技巧, 持续记录ing >
🔥 < CSDN周赛解析:第 27 期 >
相关文章:
< elementUI组件样式及功能补全: 实现点击steps组件跳转对应步骤 >
文章目录👉 前言👉 一、效果演示👉 二、点击steps跳转效果实现👉 三、实现案例往期内容 💨👉 前言 在 Vue elementUi 开发中,elementUI中steps步骤条组件只提供了change方法,并未提…...
【学习笔记】互联网金融:芝麻信用分的建模过程
学习资料: 数据分析学习随记 | 互联网金融行业2C授信模型(芝麻信用) 1. 背景 互联网金融的本质是风控。 1.1 数据分析师的角色 数据分析师在金融行业基本上有两种角色: 1.1.1 数据建模师 偏算法,但要很懂业务。要求对算法的理解较深&am…...
Linux C/C++或者嵌入式开发到底有没有35岁危机?
一个读者问了一个问题: 我现在25岁,双非一本本科。在深圳上班,做嵌入式开发,打算走Linux C/C开发,工资目前一般。读了前辈写的很多博客之后,觉得很棒。我现在有一些疑问。 1.最近互联网裁员很厉害嘛&#x…...
国内领先的十大API接口排行
应用程序编程接口API即(Application Programming Interface),现在众多企业的应用系统中常用的开放接口,对接相应的系统、软件功能,简化专业化的程序开发。 一、百度API 百度API超市开通1136个数据服务接口。 网址&a…...
【Linux】Kickstart 配置U盘自动化安装Linux系统
文章目录前言一、刻录USB二、配置以BIOS方式启动引导2.1 引导文件配置2.2 KS文件配置三、以EFI方式启动引导3.1 引导文件3.2 KS文件四、 总结前言 之前安装系统,例如在VMware虚拟机中或物理服务器中,都是根据图形界面上的指示进行下一步这类的操作。 现…...
【Spring MVC】这一篇,带你从入门到进阶
目录 1、什么是MVC? 2、什么是 Spring MVC 3、如何学好 Spring MVC? 3.1、如何创建 Spring MVC 项目 3.1.1、使用Spring Initializr创建(推荐) 3.2、将 Spring 程序与用户(浏览器)联通 3.3、基础注解…...
InstallAware Multi-Platform updated
InstallAware Multi-Platform updated 原生ARM:为您的内置设置、IDE和整个工具链添加了Apple macOS和Linux ARM构建。 本地化:引擎内多语言感知,可再分发工具,具有资产隔离功能,使您的IP保持安全。 模板:将…...
Spring Batch 高级篇-多线程步骤
目录 引言 概念 案例 转视频版 引言 接着上篇:Spring Batch ItemWriter组件,了解Spring Batch ItemWriter处理组件后,接下来一起学习一下Spring Batch 高级功能-多线程步骤 概念 默认的情况下,步骤基本上在单线程中执行&…...
关于iframe一些通讯的记录(可适用工作流审批)
一.知识点(1).我们可以通过postMessage(发送方)和onmessage(接收方)这两个HTML5的方法, 来解决跨页面通信问题,或者通过iframe嵌套的不同页面之间的通信a.父页面代码如下<div v-if"src" class"iframe"><iframeref"iframe"id…...
JavaWeb
1、静态Web html、css 2、动态Web 提供给所有人看的数据始终会发生变化。技术栈:Servlet/JSP,ASP,PHP。 Web应用程序:可以提供浏览器访问的程序。 1、这个统一的web资源会被放在同一个文件夹下,web应用程序-->Tom…...
ip段192.168.1.0/24和192.168.0.0/16
192.168.1.0/24192.168.1.1 ~ 192.168.1.254前24位为网络前缀,后8位代表主机号。如下1100 0000,1010 1000,0000 0001,0000 0000192.168.0.0/16192.168.0.1 ~ 192.168.255.254前16位为网络前缀,后16位代表主机号。如下1…...
《爆肝整理》保姆级系列教程python接口自动化(二十二)--unittest执行顺序隐藏的坑(详解)
简介 大多数的初学者在使用 unittest 框架时候,不清楚用例的执行顺序到底是怎样的。对测试类里面的类和方法分不清楚,不知道什么时候执行,什么时候不执行。虽然或许通过代码实现了,也是稀里糊涂的一知半解,这样还好&am…...
【第二章 IOC操作bean管理(XML注入其他类型属性(字面量,外部bean,内部bean,级联赋值)、XML注入集合属性)】
第二章 IOC操作bean管理(XML注入其他类型属性(字面量,外部bean,内部bean,级联赋值)、XML注入集合属性) 1.IOC操作bean管理(XML注入其他类型属性) (1…...
Kotlin-枚举和印章
kotlin-枚举 枚举也是一个对象,枚举对象的定义需要使用enum关键字 枚举对象可以定义函数 假设定义一个星期枚举对象。就是一下写法 enum class Week {星期一,星期二,星期三,星期四,星期五,星期六,星期日;//打印星期几fun printWeek(){println("这是星期枚举对…...
_linux (TCP协议通讯流程)
文章目录TCP协议通讯流程TCP 和 UDP 对比TCP协议通讯流程 下图是基于TCP协议的客户端/服务器程序的一般流程: 服务器初始化: 调用socket, 创建文件描述符;调用bind, 将当前的文件描述符和ip/port绑定在一起;如果这个端口已经被其他进程占用了, 就会bind失 败;调用listen, 声…...
PMP考试详解,新考纲有什么变化?
一,为什么优先考虑PMP持证人员? PMP证书在我国大型企业、跨国企业、央企/国企等单位的招聘中都比较重视,特别是在许多项目投标环节中,明确标明需要有PMP持证人员,才能在投标、竞标中代表公司有资格承担项目。 除此之…...
C++学习笔记-日期和时间
C中可以使用的日期时间API主要分为两类: C-style 日期时间库,位于头文件中。这是原先<time.h>头文件的C版本。 chrono库:C 11中新增API,增加了时间点,时长和时钟等相关接口。 在C11之前,C编程只能使…...
Nordic nRF芯片FDS模块学习
FDS系统学习 文章目录FDS系统学习一、ROM,RAM,FLASH作用二、ROM,RAM和FLASH在单片中的运作原理三、Flash访问模块FDS用法1. FDS在sdk_config.h中的配置2. fds_register()注册3. fds_record_write()写记录4. fds_record_find()查找5. fds_record_open()读…...
JVM 学习(1)—JVM 与 JMM 内存模型简单理解
一、JVM 内存模型概述 (1) 为什么会出现 JVM 内存模型呢? JVM 内存模型是为规范描述 Java 虚拟机在执行 Java 程序时,将程序中的数据和代码存储到计算机内存中的方式和规则。JVM 内存模型定义 Java 虚拟机所使用的内存结构以及内存区域之间的关系&…...
NMS详解
(类别,坐标1,坐标2,坐标3,坐标4,类别分数) step1:对最后一列分数进行排序 ,可以看到类别就被打乱了 step2: 弹出得到selected_bboxes作为基准,减少bbox_list。其实就是准…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域,专业机构的核心价值不仅在于减轻债务数字,更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明,合法债务优化需同步实现三重平衡: 法律刚性(债…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的,需要先安…...
boost::filesystem::path文件路径使用详解和示例
boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类,封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解,包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...
GraphRAG优化新思路-开源的ROGRAG框架
目前的如微软开源的GraphRAG的工作流程都较为复杂,难以孤立地评估各个组件的贡献,传统的检索方法在处理复杂推理任务时可能不够有效,特别是在需要理解实体间关系或多跳知识的情况下。先说结论,看完后感觉这个框架性能上不会比Grap…...
