当前位置: 首页 > 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文件里面写这个 …...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...