解決Element組件的坑:抽屜drawer和彈窗dialog

更新時(shí)間：2024年07月24日 11:06:38 作者：一只卑微的菜狗

這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

業(yè)務(wù)場(chǎng)景

因?yàn)轫?xiàng)目需要封裝組件，考慮二次封裝抽屜組件el-drawer，在父組件控制抽屜組件的顯示隱藏。

需要在指定的組件中打開抽屜。

在抽屜組件el-drawer里使用自己封裝的一個(gè)自定義組件。

存在以下兩個(gè)大問題：

父組件控制抽屜組件的顯示隱藏效果無法呈現(xiàn)
抽屜組件里的自定義組件沒有加載/創(chuàng)建出來

針對(duì)第一個(gè)問題，具體解決方案

父組件：

<Drawer :isShowDrawer.sync = "isShowDrawer" @closeDrawer="isShowDrawer = $event"></Drawer>

子組件Drawer：

<el-drawer :visible.sync="isShow" direction="rtl" ref="drawerExam"></el-drawer>
...

    props: {

       isShowDrawer: {
          type: Boolean,
          default: false
       },

    },

    computed: {
        isShow: {
            set(val) {
                this.$emit('closeDrawer', val);
            },
            get() {
                return this.isShowDrawer;
            }
        },
    },

若想實(shí)現(xiàn)，在指定的組件中打開抽屜，需要添加以下樣式

父組件樣式：

{
    position: relative;
    overflow: hidden;
}

抽屜組件：

設(shè)置position為絕對(duì)定位，但是會(huì)出現(xiàn)一個(gè)問題：v-modal遮罩層是滿屏顯示的

因此最終解決方案為：

先在抽屜組件外套一層div標(biāo)簽，再修改內(nèi)部樣式

<div class="drawerExam-container"> 
    <el-drawer :visible.sync="isShow" direction="rtl" ref="drawerExam" @open="openDrawer()"></el-drawer>
</div>
...
.drawerExam-container {
    ::v-deep .v-modal {
        position: absolute;
    }
}

針對(duì)第二個(gè)問題，具體解決方案

在抽屜組件里，引入了自己封裝的組件Checkbox，不能出現(xiàn)的原因是：Element官網(wǎng)有提到

如下我在抽屜組件中引入了Checkbox（自己封裝的組件），其中，dataList是父組件傳給Checkbox的數(shù)據(jù)，chooseClass是Checkbox返回來的數(shù)據(jù)

 <el-drawer :visible.sync="isShow" direction="rtl" ref="drawerExam" @open="openDrawer()">
    <Checkbox :dataList="easy" @chooseEasy="updateForm" ref="easyRef"></Checkbox>
</el-drawer>

解決方法：

給el-drawer增加open回調(diào)函數(shù)
通過使用Checkbox內(nèi)部方法賦值的方式，讓Checkbox組件能夠擁有值（因?yàn)樵贑heckbox組件內(nèi)接收不到父組件傳過去的dataList，才考慮使用Checkbox組件內(nèi)部方法直接給組件賦值

el-drawer的open回調(diào)函數(shù)：
...
        openDrawer() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$refs.easyRef.UpdateList(this.easy);
                }, 0)
            })
 
        },
 
Checkbox組件：
...
        UpdateList(arr) {
            this.newDataList = arr;
            // 置空該組件原有的值
            this.checkboxGroup = [];
            this.chooseEasy();
        },
 
        // 多選選中后給父組件傳值
        chooseEasy() {
            this.$emit('chooseEasy', this.checkboxGroup);
        },