快捷導(dǎo)航

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

更新時(shí)間：2022年11月18日 10:11:46 作者：MINO吖

el-dialog組件提供了fullscreen功能，但是無(wú)法滿足業(yè)務(wù)需求。系統(tǒng)使用了許多dialog，不方便重新封裝dialog組件，故直接對(duì)源碼進(jìn)行修改，這篇文章主要介紹了修改element-ui源碼給el-dialog添加全屏功能,需要的朋友可以參考下

背景：

el-dialog組件提供了fullscreen功能，但是無(wú)法滿足業(yè)務(wù)需求。系統(tǒng)使用了許多dialog，不方便重新封裝dialog組件，故直接對(duì)源碼進(jìn)行修改。

1.克隆element官方的倉(cāng)庫(kù)到本地

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

2.下載到本地之后進(jìn)入項(xiàng)目，安裝依賴包

cd elementnpm install

3.打開(kāi)package 文件夾,修改源代碼

打開(kāi) 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屬性，默認(rèn)為true
       type: Boolean,
       default: true,
    },
    ...
}
data() {
    return {
        isFullscreen: false, // 新增全屏狀態(tài)
        ...
    };
},
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.打包我們修改后的源碼