ElementUI-Collapse折叠面板更改展开icon位置

jiezi

5 年前

我们先来看官网中展开 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 查看效果。

icon 在右侧