element ui抽屉组件蒙版取消后，左侧内容可点击，可处理

关于elementUI的抽屉组件基本都是会用到的，最近项目中需求提了一个底部蒙版不要，左侧正常点击的功能。也就是说抽屉打开后，如果左侧内容中有输入框，选择框和滚动条等，那么输入框正常输入，选择框正常选择，滚动条正常滚动。抽屉打开后不影响底部页面的操作。

一：处理抽屉蒙版

elementUI抽屉组件的属性modal值为false的时候蒙版就没有了，但是这里将蒙版去了只是将当前蒙版的透明度更改了而已，其实蒙版还是在的，左侧的内容依然点击不了。

后来就想到把蒙版的宽度处理一下，让蒙版的宽度和抽屉打开的宽度一样的时候，是不是就可以了呢

二：实现蒙版宽度

首先需要定义一个class用来写抽屉的样式。抽屉上定义的class是定义到抽屉最外层的div上的 el-drawer__wrapper上的。

其次再定义custom-class的class值，这个class是定义到抽屉里面打开层的div上的。

css中写入自己想要的宽度。两个class的宽度要一样，这样蒙版就会和抽屉的宽度一样了。这里的样式style上不能加上scoped属性，否则样式不会生效的。

到这我的功能就实现了，看来这个方法确实是可以实现我现在的功能的。

三：总结

如果抽屉的宽度想以百分比也是可以实现的，直接宽度百分比就行。宽度写好后整个抽屉像是从中间往左边打开，由于我的需求是定义从右边往左边弹出来。所以我在抽屉最外层的class上加了margin-left: auto; 这样就可以从右边弹出了，如果功能是从左边弹出的就可以不用写margin-left: auto; 只需要将抽屉弹框的打开方向direction属性写好就行了。

    <el-drawer
      :visible.sync="drawer"
      custom-class="AIdrawer"
      :withHeader="false"
      :wrapperClosable="false"
      :modal="false"
      class="AIdrawerWrapper"
      >
    <!-- 中间内容已省略-->
  </el-drawer>


<!-- css部分 -->

.AIdrawerWrapper{
  width: 500px;
  margin-left: auto;
}
.AIdrawer{
  width: 500px !important;
}