前言： 項目開發(fā)中，總要一些需求不能完全使用element ui源框架，這次就是公司項目有個關于時間線的需求，使用Timeline不能直接實現(xiàn)，就自己重新在原有框架的基礎上，修改el-timeline-item 組件源碼，實現(xiàn)功能
具體方法如下：

方法一 直接修改element UI框架的源碼

操作步驟：
1、github上下載element ui源碼
地址：https://github.com/ElemeFE/element
2、安裝項目所需要的依賴

npm install

3、在packages目錄下，找到自己需要修改的組件的源碼，進行修改

image.png

4、在項目根目錄下，重新進行打包

npm run dist

5、找到自己項目中的node_modules包下的element-ui文件夾下的lib包，用你修改好后打包生成的lib包進行替換，重啟自己的項目即可

不足

（1）直接修改element ui源碼的方法，如果刪除之前修改的node_modules依賴，重新npm install 時，之前的修改方法會失效。
（2）項目開發(fā)，一般是多人協(xié)作的方法，由于node_modules文件太大，一般都沒有放到服務器上。這樣就要求，其他開發(fā)人員也需要進行源碼的修改，替換各自的node_modules操作才可以

方法二 重新在項目里開發(fā)新的組件

操作步驟：
1、在公共組件目錄重新創(chuàng)建自定義一個組件，這里新建一個自定義組件文件夾，創(chuàng)建一個時間線元素的組件，eg：TimeLineItem.vue。同時在創(chuàng)建一個公共組件js 我這里命名為index.js

image.png

2、在TimeLineItem.vue文件中，寫入自己的組件，這里我的改動比較小，就直接粘貼了element ui源碼中時間線組件，item.vue的源碼

image.png

<!--
 * @Descripttion: 重新封裝的自定義時間線item組件
 * @version: 
 * @Author: year
 * @Date: 2020-04-20 11:26:43
 * @LastEditors: year
 * @LastEditTime: 2020-04-20 11:41:47
 -->
<template>
  <li class="el-timeline-item">
    <div class="el-timeline-item__tail"></div>

    <div v-if="!$slots.dot"
      class="el-timeline-item__node"
      :class="[
        `el-timeline-item__node--${size || ''}`,
        `el-timeline-item__node--${type || ''}`
      ]"
      :style="{
        backgroundColor: color
      }"
    >
      <i v-if="icon"
        class="el-timeline-item__icon"
        :class="icon"
      ></i>
    </div>
    <div v-if="$slots.dot" class="el-timeline-item__dot">
      <slot name="dot"></slot>
    </div>

    <div class="el-timeline-item__wrapper">
      <div v-if="!hideTimestamp && placement === 'top'"
        class="el-timeline-item__timestamp is-top">
        {{timestamp}}<br/>
        <span class="el-timeline-item-timestamp_span">{{timestampSpan}}</span>
      </div>

      <div class="el-timeline-item__content">
        <slot></slot>
      </div>

      <div v-if="!hideTimestamp && placement === 'bottom'"
        class="el-timeline-item__timestamp is-bottom">
        {{timestamp}}
      </div>
    </div>
  </li>
</template>

<script>
  export default {
    name: 'UserDefinedTimelineItem',

    inject: ['timeline'],

    props: {
      timestamp: String,
      timestampSpan: String,

      hideTimestamp: {
        type: Boolean,
        default: false
      },

      placement: {
        type: String,
        default: 'bottom'
      },

      type: String,

      color: String,

      size: {
        type: String,
        default: 'normal'
      },

      icon: String
    }
  };
</script>

<style lang='scss' scoped>

</style>

其中el-timeline-item-timestamp_span為我自己新增加的內(nèi)容
4、如何使用自己的組件
（1）局部使用，直接在需要該組件的父組件中，引入該組件,注冊之后，之間使用即可

<time-line-item> </time-line-item>

import TimeLineItem from "./TimeLineItem.vue"

components: {
    TimeLineItem
  }

（2）全局注冊使用
在公共組件index.js文件里直接引入，然后全局注冊

import TimeLineItem from "./TimeLineItem.vue"

export default (Vue) => {
  Vue.component("TimeLineItem", TimeLineItem)
}

在main.js文件中引入，然后使用Vue.use方法

import timeLineItem  from '@/components/UserDefinedCom/index.js'
Vue.use(timeLineItem)

最后在所需要使用的父組件內(nèi)直接使用即可

<time-line-item> </time-line-item>