解决Element组件的坑:抽屉drawer和弹窗dialog
作者：一只卑微的菜狗
这篇文章主要介绍了解决Element组件的坑:抽屉drawer和弹窗dialog问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
业务场景
因为项目需要封装组件，考虑二次封装抽屉组件el-drawer，在父组件控制抽屉组件的显示隐藏。
需要在指定的组件中打开抽屉。
在抽屉组件el-drawer里使用自己封装的一个自定义组件。
存在以下两个大问题：
- 父组件控制抽屉组件的显示隐藏效果无法呈现
- 抽屉组件里的自定义组件没有加载/创建出来
针对第一个问题，具体解决方案
- 父组件：
<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;
}
},
},若想实现，在指定的组件中打开抽屉，需要添加以下样式
- 父组件样式：
{
position: relative;
overflow: hidden;
}- 抽屉组件：
设置position为绝对定位，但是会出现一个问题：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，不能出现的原因是：Element官网有提到
如下我在抽屉组件中引入了Checkbox（自己封装的组件），其中，dataList是父组件传给Checkbox的数据，chooseClass是Checkbox返回来的数据
<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组件内部方法直接给组件赋值
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);
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。