vue3中修改element plus组件源码并使用，比如自定义额外逻辑的解决思路方式（亲测有效）

问题描述

• element plus组件库，给到了很多ui组件，让我们使用
• 考虑到不同用户在使用组件的时候，场景需求不同
• 组件提供了诸如Attributes、Slots、Exposes、Events以供我们自由灵活使用
• 但是，某些场景情况下，这些内容依旧无法满足我们的使用需求
• 我们得去修改饿了么的源码，才能去实现我们的需求功能
• 看了一下网上的帖子文章，也没有找到合适的、快速的解决方案
• 本文，就讲述一下笔者的修改源码方式，以供大家参考
• 以el-divider为例，直观方便

elementPlus和element ui在npm下载后的一个关键区别就是不是SFC单文件组件方式了，所以不方便直接拿过来使用，即 源码修改 不像之前那么方便一些了

什么是SFC单文件组件

• Vue的 SFC（Single File Components，单文件组件）是 Vue 中用于定义组件的一种文件格式
• 在 Vue 中，可以将一个组件的模板、逻辑和样式封装在一个单独的 .vue 文件中
• 这使得代码组织更加清晰且易于维护
• 就是包含 html结构、css样式、js逻辑的一个单独的vue文件（即SFC）

即：SFC

<template>
    ......
</template>

<script setup>
    ......
</script>

<style scoped>
    ......
</style>

这里，笔者推荐一个还不错的sfc的vue3的组件库：https://themusecatcher.github.io/vue-amazing-ui/ 挺不错的...

源码修改思路方式步骤

• 第一步，在github上找到element plus的dev分支上的源码
• 第二步，找到对应的组件和.ts文件，并且复制粘贴到自己项目中（新建文件夹存放）
• 第三步，把其中的引用，指向node_modules文件夹中的element plus
• 最后，想怎么改，就怎么修改，就可以愉快地添加自己想要的额外的逻辑了

第一步，github找elementPlus的dev分支下载代码

第二步，下载好以后，找到对应的文件夹下的源码

比如，el-divider源码的位置在：element-plus-dev/packages/components/divider/src

只要，divider.vue和divider.ts这两个文件即可

第三步，把xxx.vue和xxx.ts文件复制粘贴到自己项目中

第四步，修改.vue和.ts中的引入的一些工具函数的位置

比如，.vue中引入的有一个叫做useNamespace这个函数，如下：

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks' // 这个引入要修改
import { dividerProps } from './divider'
import type { CSSProperties } from 'vue'

defineOptions({
  name: 'ElDivider',
})
......
</script>

• import { useNamespace } from '@element-plus/hooks'
• 改为使用node_modules文件夹中的index.mjs文件
• 如下图示：

最终，就变成这样得了：

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from 'element-plus/es/hooks/use-namespace/index.mjs'

......
</script>

同样的，divider.ts文件中，也要修改一下：

原来的：

import { buildProps, definePropType } from '@element-plus/utils' // 这里要修改
import type { ExtractPropTypes } from 'vue'
import type Divider from './divider.vue'

export type BorderStyle = CSSStyleDeclaration['borderStyle']
......

修改成：

import { buildProps, definePropType } from 'element-plus/es/utils/index.mjs' // import { buildProps, definePropType } from '@element-plus/es/utils'
import type { ExtractPropTypes } from 'vue'
import type Divider from './divider.vue'

export type BorderStyle = CSSStyleDeclaration['borderStyle']

补充，index.mjs是什么文件

我们打开node_modules文件夹中的element-plus/es/hooks/use-namespace/index.mjs的文件，如下截图：

• 大家也注意到了，这个.mjs和.js好像没有太多区别
• 也都能使用 模块化语法 引入 和 暴露导出 （简单而记）
• 官方定义如下：
• index.mjs 是一个使用 .mjs 扩展名的文件，它代表了一个使用 ES6 模块语法的 JavaScript 文件
• .mjs 扩展名是 Node.js 社区为区分 ES6 模块与传统的 CommonJS 模块而引入的标准扩展名
• 在 ES6 模块中，我们可以使用 import 和 export 语句来导入和导出模块中的功能

案例代码：

// index.mjs 
export function greet(name) { 
    console.log(`Hello, ${name}!`); 
} 
// 其他文件中导入 
import { greet } from './index.mjs'; 
greet('World');

最后一步，使用之

• 通过上述的操作，我们就把elementPlus的divider组件的源码移植过来了
• 然后，就可以在.vue中随意修改，添加自己想要的逻辑了

使用：

<template>
    <div class="boxWrap">
        <h3>分割线</h3>
        <Divider></Divider>
        <Divider content-position="left" border-style="dashed">分割线内容</Divider>
        <Divider content-position="right" border-style="dotted">分割线内容</Divider>
        <Divider border-style="inset">分割线内容</Divider>
        <Divider border-style="groove">分割线内容</Divider>
        <Divider border-style="ridge">分割线内容</Divider>
        <div>
            <span>Rain</span>
            <Divider direction="vertical" />
            <span>Home</span>
            <Divider direction="vertical" border-style="dashed" />
            <span>Grass</span>
        </div>
    </div>
</template>

<script setup>
// 使用自己移植过来的 divider 组件
import Divider from "../../ele/divider/divider.vue";
</script>

<style scoped>
.boxWrap {
    zoom: 2.4;
}
</style>

• 至此，vue3中修改element plus组件源码并使用，就讲完了

注意，源码中很多工具方法函数的引用，一般都在node_modules文件夹中的element-plus/es文件夹中，大家去看自己要用的源码中，用到了谁，就去es文件夹中去找即可

代码仓库地址：https://github.com/shuirongshuifu/vue3-echarts5-example