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>

상태 표시 줄 포함

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

설명 이 있 는 절차

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

중간 단계

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

아이콘 이 있 는 단계

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

수직 단계

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

깔끔 한 스타일 의 절차

<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
Step
Attributes
Step
Slot

Element Steps 단계 의 사용법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Element Steps 단계 의 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!