element--Diaolog彈窗打開之后渲染組件方式
element--Diaolog彈窗打開之后渲染組件
描述
父子兩個組件,父組件打開子組件彈窗,然后執(zhí)行方法請求接口,獲取數(shù)據(jù)之后渲染頁面,且每次點擊都執(zhí)行該方法。
遇到的問題
最開始簡單地將方法放在子組件mounted里面,只有第一次打開彈窗會執(zhí)行方法。
了解到,彈窗只創(chuàng)建了一次。所以,在想是不是可以用keep-alive模式下的actived,然而并沒有什么用。actived和deactived只在keep-alive使用時生效。
然后想到在打開彈窗時候,強行調用子組件的方法
// initForm: 子組件方法 // this.dialog.data.id: 子組件的請求接口的參數(shù) this.$refs.dialog.initForm(this.dialog.data.id)
這次算是ok了,但是僅僅這樣還不夠。多次請求接口發(fā)現(xiàn),如果接口請求速度夠快,方法會提前執(zhí)行,渲染組件。
這本來不是什么壞事,壞就壞在渲染階段。如果數(shù)據(jù)先一步到位,然后開始渲染組件,這時候彈窗還沒有創(chuàng)建虛擬dom,會有bug。例如:我的彈窗如果是一個echart的圖表,需要綁定一個dom節(jié)點進行渲染。節(jié)點都沒有渲染出來,就會報錯。
所以,第一次使用時候采用的方案:
直接在調用子組件方法的外面包了一個setTimeout,讓彈窗飛一會,然后再渲染。
后面回過頭看了一下,其實不用這么麻煩,element中彈窗組件有個回調函數(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自帶的彈窗打開回調函數(shù) --> <component :is="dialog.name" ref="dialog"></component><!-- 動態(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' } }, // 編輯修改設備信息 edit (id) { this.dialog = { visible: true, title: '修改連接配置信息', width: '1000px', name: 'edit-config', data: id } }, // 彈窗打開回調(更新數(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è)務場景
因為項目需要封裝組件,考慮二次封裝抽屜組件el-drawer,在父組件控制抽屜組件的顯示隱藏。需要在指定的組件中打開抽屜。在抽屜組件el-drawer里使用自己封裝的一個自定義組件。
存在以下兩個大問題:
- 父組件控制抽屜組件的顯示隱藏效果無法呈現(xiàn)
- 抽屜組件里的自定義組件沒有加載/創(chuàng)建出來
針對第一個問題,具體解決方案如下
父組件:
<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; } }, },
若想實現(xiàn),在指定的組件中打開抽屜,需要添加以下樣式
父組件樣式:
{ position: relative; overflow: hidden; }
抽屜組件:
設置position為絕對定位,但是會出現(xiàn)一個問題:v-modal遮罩層是滿屏顯示的
因此最終解決方案為:
先在抽屜組件外套一層div標簽,再修改內部樣式
<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; } }
針對第二個問題,具體解決方案如下
在抽屜組件里,引入了自己封裝的組件Checkbox,不能出現(xiàn)的原因是:Element官網有提到
如下我在抽屜組件中引入了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回調函數(shù)
通過使用Checkbox內部方法賦值的方式,讓Checkbox組件能夠擁有值(因為在Checkbox組件內接收不到父組件傳過去的dataList,才考慮使用Checkbox組件內部方法直接給組件賦值
el-drawer的open回調函數(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); },
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue?使用postMessage?實現(xiàn)父子跨域通信
這篇文章主要介紹了Vue應用?postMessage?實現(xiàn)父子跨域通信,通過示例介紹了postMessage的使用,本文結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-12-12vue3+ts+elementPLus實現(xiàn)v-preview指令
本文主要介紹了vue3+ts+elementPLus實現(xiàn)v-preview指令,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-05-05Vue2.0+ElementUI+PageHelper實現(xiàn)的表格分頁功能
ElementUI也是一套很不錯的組件庫,對于我們經常用到的表格、表單、時間日期選擇器等常用組件都有著很好的封裝和接口。這篇文章主要介紹了Vue2.0+ElementUI+PageHelper實現(xiàn)的表格分頁,需要的朋友可以參考下2021-10-10vue video和vue-video-player實現(xiàn)視頻鋪滿教程
這篇文章主要介紹了vue video和vue-video-player實現(xiàn)視頻鋪滿教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10