解决Element组件的坑:抽屉drawer和弹窗dialog

From: https://www.jb51.net/javascript/3247522mn.htm

这篇文章主要介绍了解决Element组件的坑:抽屉drawer和弹窗dialog问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

 

业务场景

因为项目需要封装组件，考虑二次封装抽屉组件el-drawer，在父组件控制抽屉组件的显示隐藏。

需要在指定的组件中打开抽屉。

在抽屉组件el-drawer里使用自己封装的一个自定义组件。

存在以下两个大问题：

1. 父组件控制抽屉组件的显示隐藏效果无法呈现
2. 抽屉组件里的自定义组件没有加载/创建出来

针对第一个问题，具体解决方案

• 父组件：

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

• 子组件Drawer：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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

若想实现，在指定的组件中打开抽屉，需要添加以下样式

• 父组件样式：

1 2 3 4

{     position: relative;     overflow: hidden; }

• 抽屉组件：

设置position为绝对定位，但是会出现一个问题：v-modal遮罩层是满屏显示的

 

因此最终解决方案为：

先在抽屉组件外套一层div标签，再修改内部样式

1 2 3 4 5 6 7 8 9

<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，不能出现的原因是：Element官网有提到

 

如下我在抽屉组件中引入了Checkbox（自己封装的组件），其中，dataList是父组件传给Checkbox的数据，chooseClass是Checkbox返回来的数据

1 2 3

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

解决方法：

• 给el-drawer增加open回调函数
• 通过使用Checkbox内部方法赋值的方式，让Checkbox组件能够拥有值（因为在Checkbox组件内接收不到父组件传过去的dataList，才考虑使用Checkbox组件内部方法直接给组件赋值

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

el-drawer的open回调函数： ...         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);         },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。