Element Steps步骤条的使用方法


Posted in Javascript onJuly 26, 2020

组件— 通知

基础用法

Element Steps步骤条的使用方法

<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>

含状态步骤条

Element Steps步骤条的使用方法

<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>

有描述的步骤条

Element Steps步骤条的使用方法

<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>

居中的步骤条

Element Steps步骤条的使用方法

<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>

带图标的步骤条

Element Steps步骤条的使用方法

<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>

竖式步骤条

Element Steps步骤条的使用方法

<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>

简洁风格的步骤条

Element Steps步骤条的使用方法

<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>

Steps Attributes

Element Steps步骤条的使用方法Step

Attributes

Element Steps步骤条的使用方法Step

Slot

Element Steps步骤条的使用方法

到此这篇关于Element Steps步骤条的使用方法的文章就介绍到这了,更多相关Element Steps步骤条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
js正确获取元素样式详解
Aug 07 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
js实现常见的工具条效果
Mar 02 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
详解Vue之父子组件传值
Apr 01 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 #Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 #Javascript
VUE动态生成word的实现
Jul 26 #Javascript
Element Dialog对话框的使用示例
Jul 26 #Javascript
在vue中使用防抖函数组件操作
Jul 26 #Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 #Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 #Javascript
You might like
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php车辆违章查询数据示例
2016/10/14 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python 项目转化为so文件实例
2019/12/23 Python
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
金融专业个人求职信范文
2013/11/28 职场文书
党员创先争优活动总结
2014/05/04 职场文书
经典毕业生求职信
2014/07/12 职场文书
员工保密协议书
2014/09/27 职场文书
高三物理教学反思
2016/02/20 职场文书