vue+element-ui的el-steps组件二次封装（步骤组件）

最新推荐文章于 2026-07-02 14:47:07 发布

原创

最新推荐文章于 2026-07-02 14:47:07 发布 · 2.1k 阅读

收录于

当前文章被以下社区和专栏收录：

本文档介绍了一个用于处理分步数据输入的Vue组件。组件支持自定义步骤内容、按钮事件和参数传递，提供了配置参数如步骤ID、标题、描述、图标等，并在完成所有步骤后触发complete事件。组件适用于企业司机注册等需要按顺序验证信息的场景。

一、需求

项目中时常会遇到这种需求，某些数据需要前面的数据通过后才能输入的情况（即先要验证第一步才能进入第二步）——如：企业司机注册（先输入基本信息在验证驾驶证行驶证这些等)；因此封装了步骤组件

二、最终效果

在这里插入图片描述

三、参数配置

1、代码示例

<t-step-wizard
      :stepData="stepData"
      :active="active"
      :successTitle="successTitle"
      @complete="complete"  
      >
        <template #first>第一步骤</template>
      .....
  </t-step-wizard>

2、配置参数

参数	说明	类型	默认值
stepData	步骤数据源	Array	-
—id	步骤 ID 唯一	Number	-

标签

#vue.js #elementui #组件封装 #二次封装 #前端

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wocwin

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

VUE element-ui响应式步骤进度条样式代码

06-11

几款简单的基于VUE element-ui响应式步骤进度条样式代码，active往里传值即可显示步骤。

el-steps步骤条结合锚点实现页面滚动定位

可可爱爱的你吖的博客

10-09

3368

el-steps步骤条结合锚点实现页面滚动定位需求描述：给页面加个导航定位条，页面滚动到某个模块时，右侧步骤条跟着滚动，相反之，点击导航步骤条的某个模块，页面可定位到相应模块实现效果如图：（因为公司项目不便于录制gif视频） element中的步骤条没有任何点击事件，只是起到一个展示的作用，由于其它页面也有用到，便封装成了一个公共的组件 step中的代码： <template> <div class="step"> <div style="height: 1

参与评论您还未登录，请先登录后发表或查看评论

前端Vue自定义精美steps步骤条进度条插件物流信息跟踪展示组件流程审批跟进组件

chenchuang0128的博客

07-12

3484

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。

element的步骤条整合表单（steps+form）

热门推荐

suqinyi的博客

05-12

2万+

先上效果图： element ui 组件库官网使用步骤： 1、页面组合步骤 ==> 5步定义出4个步骤（看你自己需要几步）定义form表单定义4个盒子对象active属性 => 1 到 4 放置表单项设置上一步和下一步的按钮 <template> //第一步:定义出4个步骤 <el-steps :active="active" finish-status="success"> <el-step title="第一步" />

构建可信AI分身：从RAG到微调的技术实践与信任评估

weixin_30299709的博客

05-30

465

在人工智能技术快速发展的背景下，大语言模型和个性化AI代理正成为构建数字身份的重要工具。其核心原理是通过对海量数据的学习和模式识别，模拟人类的语言风格与决策逻辑。从技术价值看，这不仅能提升内容生成与自动化交互的效率，更在个性化服务、知识管理等领域展现出巨大潜力。应用场景广泛覆盖自动邮件回复、社交媒体内容生成及虚拟会议代理等。本文聚焦于如何通过检索增强生成（RAG）架构、提示工程与轻量微调（如LoRA）的混合策略，构建一个可靠、一致的AI数字分身，并深入探讨了评估其可信度的四大支柱：一致性、可预测性、稳健性与

elementUi el-steps步骤条封装成能多行展示

weixin_47701365的博客

06-29

3579

不是原创,是看个某个例子然后自己改了下,那个例子链接忘记保存了。如图,一行只能放七个进度,多了会换行展示,上组件代码。rem是做了我自己项目的适配,可根据自己需求改动。

Vue3步骤条（Steps）

Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者

04-06

1万+

引导用户按照流程完成任务的导航步骤条，支持：自定义两种标签放置位置；迷你版步骤条；垂直版步骤条；点状步骤条；可点击；自定义主题色等；总之，功能丰富，简单易用😁😁

element-plus中，Steps 步骤条组件的使用

casually的博客

04-21

2111

以上就是element-plus中，Step步骤条组件的基本使用。我们使用该组件完成了修改用户密码的功能。喜欢本篇文章的话，可以留个免费的关注~

elment-ui中使用el-steps案例

2201_75705263的博客

08-24

1396

通过active来控制步骤direction="vertical"来控制方向icon来改变图标样式。

Vue2+Element-UI的el-steps封装与修改样式

Mr_king_00的博客

11-14

2912

Vue2+Element-UI的el-step封装与修改样式。

Element Plus终极指南：5个步骤打造专业Vue 3应用界面

gitblog_00337的博客

06-19

949

Element Plus是一个基于Vue 3的企业级UI组件库，专为现代Web应用提供美观、高效的前端界面解决方案。这个组件库不仅继承了Element UI的经典设计理念，还全面拥抱Vue 3的Composition API和TypeScript，为开发者提供了更强大的类型支持和更灵活的组件组合方式。无论是构建企业后台管理系统、数据可视化平台还是电商应用，Element Plus都能提供完整的组件

Vue组件封装为Web Components实战指南

weixin_30420305的博客

06-21

388

Web Components 是浏览器原生支持的可复用 UI 技术标准，基于 Custom Elements 规范实现跨框架、跨环境的组件交付。其核心原理是通过继承 HTMLElement 构造自定义类，并利用 connectedCallback 等生命周期钩子对接 DOM 行为。技术价值在于打破框架锁定，支撑微前端、CMS嵌入、Electron跨窗口等强集成场景。相比传统 Vue 单文件组件，它提供长期演进隔离与无依赖运行能力。本文聚焦 vue-custom-element 封装实践，详解属性映射、事件桥

element Steps 步骤条无法设置单击事件

红烧咸咸鱼

06-14

1156

element Steps 步骤条无法设置单击事件

JavaScript实现大富翁游戏：从状态机到UI渲染的完整实战指南

最新发布

weixin_34348805的博客

07-02

349

状态管理是构建复杂交互应用的核心概念，它通过集中管理应用数据流，确保视图与数据的一致性。其原理在于维护单一可信数据源，并通过事件驱动或响应式机制同步更新。在工程实践中，良好的状态管理能显著提升代码可维护性和调试效率，尤其适用于游戏开发、仪表盘等动态场景。例如，在实现经典桌游如大富翁时，需要设计健壮的状态机来处理玩家回合、财产交易等流程，同时结合Canvas或SVG渲染动态棋盘。本文将深入探讨如何利用面向对象编程构建游戏实体模型，并解决租金计算、破产处理等核心逻辑，为前端开发者提供一个综合运用JavaScri

Animate.css 本质解析：CSS动画标准化接口与工程化实践

weixin_30781775的博客

06-20

428

CSS动画是Web前端实现交互动效的基础技术，其核心原理基于W3C规范的@keyframes定义与animation属性控制。相较于JavaScript动画库（如GSAP），CSS动画具有原生性能优势和低主线程占用特性，但存在触发机制受限、时长/缓动难动态调整等工程痛点。Animate.css正是为解决这些共性问题而生——它并非运行时动画引擎，而是提供标准化class命名空间与预编译keyframes的CSS动画交付接口，通过animate__前缀规避冲突、默认cubic-bezier缓动统一体验、自动处理

WebAgent：基于视觉-动作联合建模的网页自动化代理

weixin_30906185的博客

06-08

408

网页自动化是实现重复性任务提效的核心技术，其本质是让程序理解界面语义、定位交互元素并执行可靠动作。传统方案依赖HTML文本解析，易受动态class、SPA渲染和遮挡干扰；而新一代方法如WebAgent转向视觉-动作联合建模，通过融合截图与结构化DOM输入，输出CLICK、TYPE等原子指令，并结合轻量视觉反馈实现闭环修正。该范式显著提升跨网站鲁棒性，已在电商比价、SaaS巡检、简历初筛等场景落地验证。关键词涵盖网页自动化、LLM指令遵循，代表了大模型从‘回答问题’迈向‘动手做事’的关键演进。

Playwright Java滚动原理与4种生产级解决方案

weixin_34242331的博客

06-22

392

网页滚动是前端交互与自动化测试的基础能力，其底层依赖浏览器事件模型（wheel事件）、DOM可滚动容器判定及CSS overflow属性。Playwright的mouse.wheel()并非模拟物理滚轮，而是精准投递原生wheel事件，因此必须作用于具备滚动语义的元素（如overflow-y: auto的容器），否则事件将被浏览器静默忽略。该机制凸显了事件目标锚点、deltaMode像素单位缩放、跨浏览器差异等关键技术要点。在工程实践中，除wheel()外，scrollIntoViewIfNeeded()提

Playwright Skill模式：零配置端到端测试新范式

技术百科

06-21

720

端到端测试（E2E Testing）是保障Web应用质量的关键环节，其核心在于在真实浏览器环境中模拟用户交互并验证系统行为。传统方案如Selenium依赖复杂环境配置，Cypress受限于运行时模型，而Playwright凭借多浏览器支持、自动等待与精准选择器机制，已成为现代E2E工程的主流技术选型。其中，Skill模式作为Playwright v1.40+官方集成的交互式CLI能力入口，通过npx一键启动、内置Chromium运行时、DOM快照捕获与TypeScript类型推导等特性，显著降低测试脚本创建

PageAgent：前端驱动的网页AI自动化新范式

aigui1439的博客

06-15

416

网页AI自动化正从后端爬虫和跨语言工具转向以DOM为API、浏览器为运行环境的前端原生方案。其核心原理是将HTML结构语义化建模，结合轻量LLM推理与事件驱动执行，实现对用户意图的可解释、可调试、可审计的理解与响应。相比传统OCR+XPath或Python驱动方案，它显著降低环境依赖与协作成本，提升SPA动态页面适配能力，并天然支持localStorage、React状态等前端上下文。典型应用场景包括无API内部系统操作、合规敏感场景（如医疗/金融）的本地化处理、以及SaaS产品交互逻辑的快速升级。Page

Selenium ChromeDriver启动失败与协议失联深度解析

weixin_34252090的博客

06-20

390

ChromeDriver是Selenium实现浏览器自动化的底层通信桥梁，其本质是遵循W3C WebDriver标准、与Chrome版本强绑定的二进制服务进程。启动失败往往源于架构错位（如x86_64 Driver运行在ARM64环境）、路径污染（空格/中文导致subprocess编码异常）或权限封锁（UAC/杀软拦截--no-sandbox）；而‘浏览器已启动却连接失败’则指向协议层问题：remote-debugging-port端口抢占、Docker网络隔离或企业SSL代理劫持。掌握selenium c