0
点赞
收藏
分享

微信扫一扫

vue 中如何修改element ui源码,自定义时间线TimeLine功能

小龟老师 2021-09-29 阅读 104

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

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

操作步骤:
1、github上下载element ui源码
地址:https://github.com/ElemeFE/element
2、安装项目所需要的依赖

npm install

3、在packages目录下,找到自己需要修改的组件的源码,进行修改



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



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



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>
举报

相关推荐

0 条评论