// 监听滚动条位置 document.addEventListener("scroll", scrollTop, true); // 设置对应元素的滚动条 let elVal: any = document.getElementsByClassName('el-drawer__body')[0]; // 判断是否存在滚动条 isScroll.value = elVal.scrollHeight > elVal.clientHeight; }); // 实时滚动条高度 const scrollTop =...
造成的后果就是超出的部分无法查看,解决办法就是通过css来设置滚动条并允许上下滚动: /deep/ .el-drawer__body { overflow: auto; } /deep/ .el-drawer__container ::-webkit-scrollbar{ display: none; } 1. 2. 3. 4. 5. 6. 细心的你可能发现了,改变el-drawer的样式时,都使用了深度选择器。
/*1.显示滚动条:当内容超出容器的时候,可以拖动:*/ .el-drawer__body { overflow: auto; } /*2.隐藏滚动条,太丑了*/ .el-drawer__container ::-webkit-scrollbar{ display: none; }
overflow 属性 原理很简单 把溢出的部分因滚动条的方式去呈现出来,x跟y轴的滚动,只要y轴显示就行 设置滚动条样式,以及背景颜色 .overflowAuto{overflow-y: auto;position: absolute;width:100%;height:100%;}.overflowAuto::-webkit-scrollbar {height:6px;width:6px;}.overflowAuto::-webkit-scrollbar-thumb ...
element-ui Drawer 内容全部屏幕高度不能滑动 解决办法: /1.显示滚动条:当内容超出容器的时候,可以拖动:/ .el-drawer__body{overflow:auto;} /2.隐藏滚动条,太丑了/ .el-drawer__container ::-webkit-scrollbar{display:none;}
mmdctjj/meowgithub.com/mmdctjj/meow/blob/master/src/components/drawer.vue/ 一、实践 1.分析 一个抽屉组件的z-index必定是在当前页面之上的,在抽屉主体之外的区域还会有一层半透明的遮罩层,知道这些就很容易了 // drawer.vue <template> </template> .drawer {...
Element-plus中el-Drawer挂载指定元素后依然fixed? 需求:我需要一个抽屉,没有遮罩,打开抽屉时还能操作界面其它地方。我尝试使用append-to=".content-section"指定它挂载到其父dom上,另外关闭遮罩:modal="false"。这些生效之后,Drawer外层依然有一层div,而且是fixed样式,这样我就无法点击抽屉以外...
</el-menu> </template> .menupage position: fixed; width: 100%; top: 0px; z-index: 100; .menupage .el-menu.el-menu--horizontal border-bottom: none; height: 100px; line-height: 100px; .menupage .el-menu.el-menu--horizontal>.el-menu-item,.menupage .el-menu--horizontal>.el...
elementui源码学习之仿写一个el-drawer 本篇文章记录仿写一个 el-drawer 组件细节,从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章,后续空闲了会不断更新并仿写其他组件。源码在github上,大家可以拉下来,npm start运行跑起来,结合注释有助于更好的理解。github仓库...
456 - 使用内置滚动条 `ElScrollbar`。 457 - 优化`tooltip`增加类名,方便自定义样式。 458 459 ### 新特性 460 461 - Table 462 - 新增监听表格滚动方法 `table-scroll`。 463 464 ### 修复 465 466 - Cascader 467 - 修复级联在IE下不会自动截断bug。 468 - Input 469 - 修...