当前位置: 首页 > news >正文

ElementUI浅尝辄止27:Steps 步骤条

引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。

1.如何使用?

设置active属性,接受一个Number,表明步骤的 index,从 0 开始。需要定宽的步骤条时,设置space属性即可,它接受Number,单位为px,如果不设置,则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。

<el-steps :active="active" finish-status="success"><el-step title="步骤 1"></el-step><el-step title="步骤 2"></el-step><el-step title="步骤 3"></el-step>
</el-steps><el-button style="margin-top: 12px;" @click="next">下一步</el-button><script>export default {data() {return {active: 0};},methods: {next() {if (this.active++ > 2) this.active = 0;}}}
</script>

2.含状态步骤条

每一步骤显示出该步骤的状态。

//也可以使用title具名分发,可以用slot的方式来取代属性的设置<el-steps :space="200" :active="1" finish-status="success"><el-step title="已完成"></el-step><el-step title="进行中"></el-step><el-step title="步骤 3"></el-step>
</el-steps>

 3.有描述的步骤条

每个步骤有其对应的步骤状态描述。

<el-steps :active="1"><el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step><el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step><el-step title="步骤 3" description="这段就没那么长了"></el-step>
</el-steps>

4.居中的步骤条

标题和描述都将居中。

<el-steps :active="2" align-center><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-steps>

 5.带图标的步骤条

步骤条内可以启用各种自定义的图标。

//通过icon属性来设置图标,图标的类型可以参考 Icon 组件的文档,除此以外,还能通过具名slot来使用自定义的图标。<el-steps :active="1"><el-step title="步骤 1" icon="el-icon-edit"></el-step><el-step title="步骤 2" icon="el-icon-upload"></el-step><el-step title="步骤 3" icon="el-icon-picture"></el-step>
</el-steps>

6.竖式步骤条

竖直方向的步骤条。

只需要在el-steps元素中设置direction属性为vertical即可。

<div style="height: 300px;"><el-steps direction="vertical" :active="1"><el-step title="步骤 1"></el-step><el-step title="步骤 2"></el-step><el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step></el-steps>
</div>

7.简洁风格的步骤条

设置 simple 可应用简洁风格,该条件下 align-center / description / direction / space 都将失效。

<el-steps :active="1" simple><el-step title="步骤 1" icon="el-icon-edit"></el-step><el-step title="步骤 2" icon="el-icon-upload"></el-step><el-step title="步骤 3" icon="el-icon-picture"></el-step>
</el-steps><el-steps :active="1" finish-status="success" simple style="margin-top: 20px"><el-step title="步骤 1" ></el-step><el-step title="步骤 2" ></el-step><el-step title="步骤 3" ></el-step>
</el-steps>

 

相关文章:

ElementUI浅尝辄止27:Steps 步骤条

引导用户按照流程完成任务的分步导航条&#xff0c;可根据实际应用场景设定步骤&#xff0c;步骤不得少于 2 步。 1.如何使用&#xff1f; 设置active属性&#xff0c;接受一个Number&#xff0c;表明步骤的 index&#xff0c;从 0 开始。需要定宽的步骤条时&#xff0c;设置s…...

React 18 迁移状态逻辑至 Reducer 中

参考文章 迁移状态逻辑至 Reducer 中 对于拥有许多状态更新逻辑的组件来说&#xff0c;过于分散的事件处理程序可能会令人不知所措。对于这种情况&#xff0c;可以将组件的所有状态更新逻辑整合到一个外部函数中&#xff0c;这个函数叫作 reducer。 使用 reducer 整合状态逻…...

【SA8295P 源码分析】89 - QNX AIS Camera qcarcam_test 可执行程序 main() 函数 源代码流程分析

【SA8295P 源码分析】89 - QNX AIS Camera qcarcam_test 可执行程序 main 函数 源代码流程分析 一、qcarcam_test.cpp main() 函数源码分析二、qcarcam_test_setup_input_ctxt_thread( ) :初始化 gCtxt.inputs[input_idx] 上下文环境三、process_cb_event_thread( ) :负责处理…...

STM32屏幕计时器

目录 一、最终效果二、实现思想三、实现过程3.1 屏幕显示3.2 中断处理 一、最终效果 显示屏显示计时时间&#xff0c;格式为 00:00:00&#xff0c;依次为 时:分:秒&#xff0c;程序运行之后自动计时&#xff0c;当按下按键&#xff0c;计时清零&#xff0c;按下按键采用外部中…...

MRI多任务技术及应用

目录 一、定量心血管磁共振成像&#xff08;CMR&#xff09;的改进方法二、磁共振多任务三、磁共振多任务的成像框架四、磁共振多任务的图像模型和采样和重建策略五、利用MR多任务进行快速三维稳态CEST(ss-CEST)成像5.1 利用MR多任务进行快速三维稳态CEST(ss-CEST)成像介绍5.2 …...

app自动化测试(Android)

Capability 是一组键值对的集合&#xff08;比如&#xff1a;"platformName": "Android"&#xff09;。Capability 主要用于通知 Appium 服务端建立 Session 需要的信息。客户端使用特定语言生成 Capabilities&#xff0c;最终会以 JSON 对象的形式发送给 …...

【力扣每日一题】2023.9.3 消灭怪物的最大数量

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目比较长&#xff0c;我概括一下就是有一群怪物&#xff0c;每只怪物离城市的距离都不一样&#xff0c;并且靠近的速度也不一样&#x…...

Python入门教程 | Python3 列表(List)

Python3 列表 序列是 Python 中最基本的数据结构。 序列中的每个值都有对应的位置值&#xff0c;称之为索引&#xff0c;第一个索引是 0&#xff0c;第二个索引是 1&#xff0c;依此类推。 Python 有 6 个序列的内置类型&#xff0c;但最常见的是列表和元组。 列表都可以进…...

Java低代码开发:jvs-list(列表引擎)功能(一)配置说明

在低代码开发平台中&#xff0c;列表页是一个用于显示数据列表的页面。它通常用于展示数据库中的多条记录&#xff0c;并提供搜索、排序和筛选等功能&#xff0c;以方便用户对数据进行查找和浏览。 jvs-list是jvs快速开发平台的列表页的配置引擎&#xff0c;它和普通的crud 具…...

UI自动化之关键字驱动

关键字驱动框架&#xff1a;将每一条测试用例分成四个不同的部分 测试步骤&#xff08;Test Step&#xff09;&#xff1a;一个测试步骤的描述或者是测试对象的一个操作说明测试步骤中的对象&#xff08;Test Object&#xff09;&#xff1a;指页面的对象或者元素对象执行的动…...

前端高性能渲染 — 虚拟列表

虚拟列表&#xff0c;实际上就是在首屏加载的时候&#xff0c;只加载可视区域内需要的列表项&#xff0c;当滚动发生时&#xff0c;动态通过计算获得可视区域内的列表项&#xff0c;并将非可视区域内存在的列表项删除。该技术是解决渲染大量数据的一种解决方法。 实现虚拟列表&…...

防水出色的骨传导耳机,更适合户外运动,南卡Runner Pro 4S体验

已经接近尾声的夏季依然酷热&#xff0c;对于运动爱好者来说&#xff0c;这确实也是锻炼的好时机&#xff0c;无论是一会儿就能大汗淋漓的HIIT&#xff0c;还是是各种清凉的水上运动&#xff0c;在健身的同时&#xff0c;戴上一副耳机享受音乐&#xff0c;都会更加痛快一些。 相…...

docker快速安装-docker一键安装脚本

1.下载/配置安装脚本 touch install-docker.sh #!/bin/bash #mail:ratelcloudqq.com #system:centos7 #integration: docker-latestclear echo "######################################################" echo "# Auto Install Docker …...

1584 - Circular Sequence (UVA)

题目链接如下&#xff1a; Online Judge 我的代码如下&#xff1a; #include <cstdio> #include <string.h> const int maxN 101;int T, len, pivot; char a[maxN];int main(){scanf("%d", &T);for(int i 0; i < T; i){scanf("%s"…...

Revit SDK:Selections 选择

前言 Revit 作为一款成熟的商业软件&#xff0c;它将自己的UI选择功能也通过 API 暴露出来。通过 API 可以按照特定的过滤规则来选择相应的元素&#xff0c;能力和UI基本上是等价的。这个 SDK 用四个例子展示了 API 的能力&#xff0c;内容如下。 内容 PickforDeletion 核心…...

K8s中的RBAC(Role-Based Access Control)

摘要 RBAC&#xff08;基于角色的访问控制&#xff09;是一种在Kubernetes中用于控制用户对资源的访问权限的机制。以下是RBAC的设计实现说明&#xff1a; 角色&#xff08;Role&#xff09;和角色绑定&#xff08;RoleBinding&#xff09;&#xff1a;角色定义了一组权限&am…...

肖sir__设计测试用例方法之经验测试方法09_(黑盒测试)

设计测试用例方法之经验测试方法 一、经验的测试技术 &#xff08;1&#xff09;基于经验的测试技术之错误推测法 错误推测法也叫错误猜测法&#xff0c;就是根据经验猜想&#xff0c;已有的缺陷&#xff0c;测试经验和失败数据等可能有什么问题并依此设计测试用例 &#xff0…...

Python爬虫:下载小红书无水印图片、视频

该代码只提供学习使用&#xff0c;该项目是基于https://github.com/JoeanAmier/XHS_Downloader的小改动 1.下载项目 git clone https://github.com/zhouayi/XHS_Downloader.git2.找到需要下载的文章的ID 写入main.py中 3.下载 python main.py最近很火的莲花楼为例<嘿嘿…...

【小沐学Unity3d】3ds Max 多维子材质编辑(Multi/Sub-object)

文章目录 1、简介2、精简材质编辑器2.1 先创建多维子材质&#xff0c;后指定它2.2 先指定标准材质&#xff0c;后自动创建多维子材质 3、Slate材质编辑器3.1 编辑器简介3.2 编辑器使用 结语 1、简介 多维子材质&#xff08;Multi/Sub-object&#xff09;是为一个模形&#xff0…...

# Go学习-Day8

文章目录 Go学习-Day8单元测试Goroutine进程和线程并发和并行Go协程和主线程MPG模式CPU相关协程并行的资源竞争 Go学习-Day8 个人博客&#xff1a;CSDN博客 单元测试 testing框架会将xxx_test.go的文件引入&#xff0c;调用所有TestXxx的函数 在cal_test.go文件里面写这个 …...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...