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函数ajax
Aug 20 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
echarts统计x轴区间的数值实例代码详解
Jul 07 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安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
js转换对象为xml
2017/02/17 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
python私有属性和方法实例分析
2015/01/15 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Django中使用Celery的方法示例
2018/11/29 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
数据库连接池的工作原理
2012/09/26 面试题
模具设计与制造专业推荐信
2014/02/16 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
大学生实习推荐信
2015/03/27 职场文书