前端element组件样式修改思路

一、选择组件

• 这里用el-timeline时间线来举例

<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :timestamp="activity.timestamp">
        {{activity.content}}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activities: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: '默认样式的节点',
          timestamp: '2018-04-03 20:46'
        }]
      };
    }
  };
</script>

这是官方例子，样式是这样的，十分不符合做最新动态记录！

于是就要修改它

二、怎么修改呢？

• 先找到需要修改的地方（比如我们想把时间戳放到左边去）
  
• 看到这里el-timeline-item__timestamp就是我们要调整样式的class了

三、全局修改样式

• 因为是element-ui的加scope修改不到它
• 所以我们要新增一段<style lang="scss"></style>
• 时间戳有一个位置设置top / bottom（默认是buttom，可以看到它往下了8px）
  
• 然后我们主要是用left和top来修改位置

<style lang="scss">
.el-timeline-item__timestamp {
            margin-top: 8px;
            position: absolute !important;
            left: -150px !important;
            top: -5px;
            font-size: 14px !important;
            color: black !important;
          }
          </style>

• 可以看到效果，已经左边去了。
  
• 但是没显示完全，这是整个组件的事情了，需要把整个时间线.el-timeline组件往右边走走

.el-timeline {
      margin-left: 150px !important;
  }

• 这样就解决了
  

这里加!important是强制生效，因为相同样式设置，优先使用的是它自己的组件样式