鍍金池/ 問答/HTML/ element ui steps圖標(biāo)數(shù)字怎么反向，如3-2-1？

element ui steps圖標(biāo)數(shù)字怎么反向，如3-2-1？

因?yàn)轫?xiàng)目需求，步驟條是縱向的，但是縱向的話加狀態(tài)或者默認(rèn)的數(shù)字圖標(biāo)都是從上到下開始的，現(xiàn)在希望是從下到上開始如3-2-1，怎么辦呢？

回答
編輯回答
萌小萌

官網(wǎng)有豎向的屬性，vertical表示豎向的。但沒有配置index索引值順序（看源碼也可以發(fā)現(xiàn)）。但可以DOM操作下。

// 路徑：element@1.x/packages/steps/src/step.vue （1.4.9版本）
<span class="el-step__icon">
    <slot
      v-if="currentStatus !== 'success' && currentStatus !== 'error'"
      name="icon">
      <i v-if="icon" :class="['el-icon-' + icon]"></i>
      <div v-else>{{ index + 1 }}</div>
    </slot>
    <i
      v-else
      :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]">
    </i>
</span>
// HTML
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@1.4.9/lib/index.js"></script>
<div id="app">
<el-steps :space="100" direction="vertical" :active="1">
  <el-step title="步驟 3"></el-step>
  <el-step title="步驟 2"></el-step>
  <el-step title="步驟 1"></el-step>
</el-steps>
</div>
// JS
new Vue({
mounted(){
  [...document.querySelectorAll('.el-steps .el-step__icon div')].forEach((el, index, arr) => {
      console.log(el, arr.length - index); // 3,2,1
      el.innerHTML = arr.length - index;
  });
},
}).$mount('#app')
// CSS
@import url("http://unpkg.com/element-ui@1.4.9/lib/theme-default/index.css");

可以在線測試下 - JSfiddler

2017年1月6日 23:47
編輯回答
朕略萌

第一看文檔， 發(fā)現(xiàn)文檔里沒有相關(guān)設(shè)置，
哪就看源碼，
找到生成數(shù)字的代碼如下，發(fā)現(xiàn)沒有可配置屬性，但是可以使用icon

<i v-if="icon" class="el-step__icon-inner" :class="[icon]"></i>
<div class="el-step__icon-inner" v-if="!icon && !isSimple">{{ index + 1 }}</div>

生成解決辦法，用icon來代替，找?guī)讉€數(shù)字icon就可以了

主要是教你解決問題的辦法，一點(diǎn)小問題，自己可以解決的，特別是對于這種開放源碼的框架來說

2017年10月9日 06:18