elementUI_drawer踩坑_抽屉关闭问题

需求描述

• 需求：当点击 ”信息详情“ 按钮时，显示一个弹框显示详情内容；

  • <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,来阻止遮罩层后内容滚动；
  • 但是关闭抽屉时有时会没有清除这个类名

• 改正实现

  • detailHandleDrawerClose(){
       this.$emit('update:userInfoVisible',false)
       document.getElementsByTagName('body')[0].className = '';
    }
    

  • 在关闭抽屉时，手动将类名清空；