教你修改element-ui源码给el-dialog添加全屏功能

时间:2022-11-22 MINO吖人气:0

背景：

el-dialog组件提供了fullscreen功能，但是无法满足业务需求。系统使用了许多dialog，不方便重新封装dialog组件，故直接对源码进行修改。

1.克隆element官方的仓库到本地

git clone https://github.com/ElemeFE/element

2.下载到本地之后进入项目，安装依赖包

cd elementnpm install

3.打开package 文件夹,修改源代码

打开 package/dialog/src/component.vue

template:

<!-- div role="dialog" 的class修改为：-->
:class="['el-dialog', { 'is-fullscreen': isFullscreen, 'el-dialog--center': center }, customClass]"
 
<!-- 在button aria-label="Close"前添加按钮： -->
<button type="button" class="el-dialog__headerbtn" aria-label="Fullscreen" style="right: 46px;" v-if="fullscreen" @click="handleFullscreen">
     <i class="el-dialog__close el-icon el-icon-full-screen"></i>
</button>

script:

props: {
    ...,
    fullscreen:  { // 修改fullscreen属性，默认为true
       type: Boolean,
       default: true,
    },
    ...
}
data() {
    return {
        isFullscreen: false, // 新增全屏状态
        ...
    };
},
computed: {
    style() {
        let style = {};
        if (!this.isFullscreen) { // 判断isFullscreen
            style.marginTop = this.top;
            if (this.width) {
                style.width = this.width;
            }
        }
        return style;
    },
},
methods: {
    // 新增toggle方法
    handleFullscreen() {
        this.isFullscreen = !this.isFullscreen;
    },
    ...
}

4.打包我们修改后的源码

npm run dist

此时会发现在根目录生成了一份 lib 文件夹(后续会用到)

5.安装 patch-package

npm i patch-package --save-dev

6.替换项目中的 element-ui

首先我们找到 node_modules/element-ui/ 删除目录下的 lib 文件夹

拷贝我们刚才生成的一份 lib 文件夹到 node_modules/element-ui/ 下面

7.生成 patches 补丁文件

npx patch-package package-name

执行之后会发现在根目录生成一个 patches/element-ui+2.15.6.patch 的文件

8.新增 postinstall 命令

在 package.json scripts 配置 "postinstall": "patch-package"

9.重新安装依赖包

删除你的 node_modules文件夹

npm install 重新安装依赖重启项目

参考

加载全部内容