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

最新推荐文章于 2024-09-04 11:44:21 发布

MINO吖

最新推荐文章于 2024-09-04 11:44:21 发布

阅读量3.6k

点赞数 3

分类专栏： # Vue 文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/qq_36157085/article/details/126869999

版权

Vue 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

本文档介绍如何针对Element-UI的el-dialog组件进行源码修改，以满足全屏功能的业务需求。步骤包括克隆仓库、修改源码、打包、使用patch-package生成补丁文件，并在项目中应用这些修改。通过添加按钮和修改样式，实现了全屏切换，并通过postinstall脚本确保修改持久化。

摘要由CSDN通过智能技术生成

背景：

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

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

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

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

cd element
npm 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;
    },
    ...
}