修改element-ui源码实现el-dialog自定义全屏功能

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

cd elementnpm install

<!-- 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>

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

npm run dist

npm i patch-package --save-dev

npx patch-package package-name