vue 中如何修改element ui源码，自定义时间线Time

前言： 项目开发中，总要一些需求不能完全使用element ui源框架，这次就是公司项目有个关于时间线的需求，使用Timeline不能直接实现，就自己重新在原有框架的基础上，修改el-timeline-item 组件源码，实现功能
具体方法如下：

方法一 直接修改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）项目开发，一般是多人协作的方法，由于node_modules文件太大，一般都没有放到服务器上。这样就要求，其他开发人员也需要进行源码的修改，替换各自的node_modules操作才可以

方法二 重新在项目里开发新的组件

操作步骤：
1、在公共组件目录重新创建自定义一个组件，这里新建一个自定义组件文件夹，创建一个时间线元素的组件，eg：TimeLineItem.vue。同时在创建一个公共组件js 我这里命名为index.js

image.png

2、在TimeLineItem.vue文件中，写入自己的组件，这里我的改动比较小，就直接粘贴了element ui源码中时间线组件，item.vue的源码

image.png
3、重新修改后的组件内容如下：

<!--
 * @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为我自己新增加的内容
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)

最后在所需要使用的父组件内直接使用即可

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