ElementUI Collapse摺疊面板更改展開icon位置

icon在右側

咱們先來看官網中展開icon的位置，以下圖

咱們會由於ui的設計，將icon放置在文本的左側，咱們先看下element是否在該組件定義了相關的屬性，找了一遍發現並無。
那麼咱們若是實現以下圖中的佈局呢？

接着咱們經過觀察element該組件中title的樣式

發現了一種樣式屬性，flex。
有關flex的簡單教程請參考阮一峯老師的這一篇
flex教程

咱們發現能夠經過flex中的項目屬性，對文本和icon進行排序

常規爲了不修改到通用的組件（咱們可能只是修改部分的摺疊面板collapse樣式），須要添加一個外部的class，這裏的事例就不添加了

// html
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.10.0/lib/index.js"></script>
    <div id="app">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item  name="1">
        <span class="collapse-title" slot="title">一致性 Consistency</span>
        <div>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div>
        <div>在界面中一致：全部的元素和結構需保持一致，好比：設計樣式、圖標和文本、元素的位置等。</div>
      </el-collapse-item>
    </el-collapse>
    </div>
    // css
    @import url("//unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css");
    .collapse-title {
        flex: 1 0 90%;
        order: 1;
    }
    .el-collapse-item__header {
        flex: 1 0 auto;
        order: -1;
    }
    // js
    var Main = {
        data() {
          return {
            activeNames: ['1']
          };
        },
        methods: {
          handleChange(val) {
            console.log(val);
          }
        }
      }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

這裏的文本須要用到slot，由於咱們須要給文本添加class，這裏類名爲collapse-title。
具體能夠經過粘貼到codepen查看效果。