element--Diaolog彈窗打開(kāi)之后渲染組件方式

更新時(shí)間：2023年01月14日 16:55:35 作者：怪大叔一

這篇文章主要介紹了element--Diaolog彈窗打開(kāi)之后渲染組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element--Diaolog彈窗打開(kāi)之后渲染組件

描述

父子兩個(gè)組件，父組件打開(kāi)子組件彈窗，然后執(zhí)行方法請(qǐng)求接口，獲取數(shù)據(jù)之后渲染頁(yè)面，且每次點(diǎn)擊都執(zhí)行該方法。

遇到的問(wèn)題

最開(kāi)始簡(jiǎn)單地將方法放在子組件mounted里面，只有第一次打開(kāi)彈窗會(huì)執(zhí)行方法。

了解到，彈窗只創(chuàng)建了一次。所以，在想是不是可以用keep-alive模式下的actived，然而并沒(méi)有什么用。actived和deactived只在keep-alive使用時(shí)生效。

然后想到在打開(kāi)彈窗時(shí)候，強(qiáng)行調(diào)用子組件的方法

// initForm： 子組件方法
// this.dialog.data.id: 子組件的請(qǐng)求接口的參數(shù)
this.$refs.dialog.initForm(this.dialog.data.id)

這次算是ok了，但是僅僅這樣還不夠。多次請(qǐng)求接口發(fā)現(xiàn)，如果接口請(qǐng)求速度夠快，方法會(huì)提前執(zhí)行，渲染組件。

這本來(lái)不是什么壞事，壞就壞在渲染階段。如果數(shù)據(jù)先一步到位，然后開(kāi)始渲染組件，這時(shí)候彈窗還沒(méi)有創(chuàng)建虛擬dom，會(huì)有bug。例如：我的彈窗如果是一個(gè)echart的圖表，需要綁定一個(gè)dom節(jié)點(diǎn)進(jìn)行渲染。節(jié)點(diǎn)都沒(méi)有渲染出來(lái)，就會(huì)報(bào)錯(cuò)。

所以，第一次使用時(shí)候采用的方案：

直接在調(diào)用子組件方法的外面包了一個(gè)setTimeout，讓彈窗飛一會(huì)，然后再渲染。

后面回過(guò)頭看了一下，其實(shí)不用這么麻煩，element中彈窗組件有個(gè)回調(diào)函數(shù)

選擇opened

<el-button @click="edit(id)">修改</el-button>
<el-button @click="add">新增</el-button>
<el-dialog
  :title="dialog.title"
  :visible.sync="dialog.visible"
  :width="dialog.width"
  center
  @opened="initForm"> <!-- element自帶的彈窗打開(kāi)回調(diào)函數(shù) -->
  <component :is="dialog.name" ref="dialog"></component><!-- 動(dòng)態(tài)組件:子組件 -->
</el-dialog>
 
<script>
import { Add, Edit } from './Dialog'
export default {
  components: {
    Add,
    Edit
  },
  data () {
    return {
      dialog: { // 彈窗組件傳遞數(shù)據(jù)
        title: '',
        visible: false,
        width: '',
        name: '' // 組件名
      }
    }
  },
  methods: {
    // 新增鏈接配置信息
    add () {
      this.dialog = {
        visible: true,
        title: '新增連接配置信息',
        width: '1000px',
        name: 'add-config'
      }
    },
    // 編輯修改設(shè)備信息
    edit (id) {
      this.dialog = {
        visible: true,
        title: '修改連接配置信息',
        width: '1000px',
        name: 'edit-config',
        data: id
      }
    },
    // 彈窗打開(kāi)回調(diào)（更新數(shù)據(jù)）
    initForm () {
      switch (this.dialog.name) {
        case 'add':
          this.$refs.dialog.initForm()
          break
        case 'edit':
          this.$refs.dialog.initForm(this.dialog.data.id)
          break
        default:
          break
      }
    }
  }
}
</script>

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

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

因?yàn)轫?xiàng)目需要封裝組件，考慮二次封裝抽屜組件el-drawer，在父組件控制抽屜組件的顯示隱藏。需要在指定的組件中打開(kāi)抽屜。在抽屜組件el-drawer里使用自己封裝的一個(gè)自定義組件。

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

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

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

父組件：

<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)，在指定的組件中打開(kāi)抽屜，需要添加以下樣式

父組件樣式：

{
    position: relative;
    overflow: hidden;
}

抽屜組件：

設(shè)置position為絕對(duì)定位，但是會(huì)出現(xiàn)一個(gè)問(wèn)題：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è)問(wèn)題，具體解決方案如下

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

如下我在抽屜組件中引入了Checkbox（自己封裝的組件），其中，dataList是父組件傳給Checkbox的數(shù)據(jù)，chooseClass是Checkbox返回來(lái)的數(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ù)

通過(guò)使用Checkbox內(nèi)部方法賦值的方式，讓Checkbox組件能夠擁有值（因?yàn)樵贑heckbox組件內(nèi)接收不到父組件傳過(guò)去的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);
        },