需求描述
-
需求:当点击 ”信息详情“ 按钮时,显示一个弹框显示详情内容;
-
<el-drawer title="详情" size="1386" :direction="direction" :visible.sync="userInfoVisible" :modal-append-to-body="false" :wrapperClosable="false" :withHeader="true" custom-class="user_info_dialog" > </el-drawer>
-
做一个如上抽屉弹框,页面关闭使用的是右上角的 “X” 按钮(elementUI内部封装的)
-
实现1
直接将抽屉写在当前页面中,关闭抽屉时–>点击页面其他地方没有任何问题;
实现2
- 将抽屉封装成组件,在页面中引入此组件;
- 控制抽屉显示与隐藏的visible通过父组件传过来;
props:{
userInfoVisible:{
type:Boolean
},
问题1
问题
- 点击“X”按钮关闭弹框-弹框关闭;
- 点击页面任何地方-弹框重新显示;
原因
- 感觉是我们将参数通过父组件传递过来,elementUI组件无法去修改父组件的数据;
解决
-
当点击“X”按钮时,我们手动修改属性的值;
-
<el-drawer title="详情" size="1386" :direction="direction" :visible.sync="userInfoVisible" :modal-append-to-body="false" :before-close="detailHandleDrawerClose" :wrapperClosable="false" :withHeader="true" custom-class="user_info_dialog" > </el-drawer>
-
detailHandleDrawerClose(){ this.$emit('update:userInfoVisible',false) }
问题2
-
前提: 当前页面数据内容多,会有滚动条;
-
问题:当点击详情,关闭抽屉,有时滚动条消失—数据不能显示完全;
-
原因:
- 当抽屉显示时 会为body添加类名 el-popup-parent–hidden;
- 该类的作用是给body设置overflow:hidden,来阻止遮罩层后内容滚动;
- 但是关闭抽屉时有时会没有清除这个类名
- 当抽屉显示时 会为body添加类名 el-popup-parent–hidden;
-
改正实现
-
detailHandleDrawerClose(){ this.$emit('update:userInfoVisible',false) document.getElementsByTagName('body')[0].className = ''; }
-
在关闭抽屉时,手动将类名清空;
-