网络编程 
首页 > 网络编程 > 浏览文章

Element Steps步骤条的使用方法

(编辑:jimmy 日期: 2024/11/7 浏览:3 次 )

组件— 通知

基础用法

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步骤条的使用方法

上一篇:解决vue的router组件component在import时不能使用变量问题
下一篇:解决vue动态路由异步加载import组件,加载不到module的问题
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。