element-ui关于el-drawer抽屉的一点小bug总结_el-drawer抽屉 列表页面

最开始直接拷贝了官网的案例.简单做了修改,想着应该没问题,结果运行后发现遮罩没出来效果.而且抽屉出来后,依然可以通过滚轮滑动背后的UI.总的来说功能出来了,就是有点瑕疵,觉得这点小毛病不要在意了.不影响.

 过了很久,测试的时候突然发现,整页偶尔会抖动一下,然后就开始逐一查找是哪个组件导致.最后发现是这个抽屉组件.

这可不行,页面抖动这不能交付啊.查找原因,搜遍了网络没找到一点点有用的东西,全是那几条原创来回被传.头疼. 后来忘了哪里得来的灵感,说是这个抽屉出来的时候改变了高度什么的,导致页面左移了一个滚动条的宽度,只需要将页面最大高度设置成

方式一:

   max-height: calc(100vh - 10px); 

默认滚动条的宽度就是17px,我自己设置成了10px,所以这里-10px.设置后,确实不抖动了,但是浏览器窗口最下面有17px空白,总是难看啊.

再后来我就将就了,直到今天实在忍不了了. 继续找资料.几个小时,看了多少东西,没什么营养.

无奈想新建个项目,然后试试全部引入elementui 试试效果.果然,当我用完全引入的时候,就不存在这些个问题,而且遮罩还出来了.然后我就钻牛角尖了, 各种搜索elementui 按需引入的bug...等等问题

一无所获,算了,牺牲点吧,不用按需了

方式二 :

import ElementUI from 'element-ui'  
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

但是我不死心啊. 凭什么要我打包用不到的东西.继续搜

没什么结果,算了,自己找找原因吧. 上面提到完全引入和按需引入的情况,想着是不是样式出了问题,结果经过控制台查看vue的插件,发现了很多官方文档没有提及的属性.而且有很多是官方文档给出的,挨个试试,不了发现了惊喜!!!

方式三:

<el-drawer :visible.sync="drawer" direction="ltr"  
    :show-close="false"  
    ize="30%" 
:lockScroll="false"  
zIndex="20000" >

最后两行,就是了.这样设置就可以保证不会偏移,也不用设置最大高度,而且在最上面.

这下心里舒服多了,遮罩是不是也可以这么搞搞找出来办法? 不行,这东西需要搞样式了. 

然后在控制台,添加样式测试效果.结果也找到了

方式四:(方式三+方式四 =完美版)

.el-drawer__wrapper{
  background-color: rgba(0, 0, 0, 0.429);
}

这下好了.整个效果完美了.解决了,开心.

最后说一下,我是前端小白.头一次搞前端项目,样式确实很让我难受.不过,成功解决问题能带来快感.很爽啊....记录一下.坑爹的elementui

最后说说用的是vue-cli 5 创建的vue2项目,为了兼容IE11浏览器,我差点想放弃了,谁能想到一个第一次搞前端,还要兼容过时这么久的IE,哎,苦啊.....