样式穿透问题

html 复制代码
<el-dropdown
  trigger="click"
  popper-class="custom-more-dropdown-popper" 
  @command="handleMoreCommand"
>
  </el-dropdown>

html 复制代码
<style scoped>
/* ...你之前的样式... */
</style>

<style>
/* 这里不需要 :deep(),因为这是全局样式,
  但我们要通过 .custom-more-dropdown-popper 来限制范围 
*/

.custom-more-dropdown-popper .el-dropdown-menu {
  /* 1. 设置最大高度,超过这个高度会出现滚动条 */
  max-height: 300px; 
  
  /* 2. 开启垂直滚动 */
  overflow-y: auto;
  
  /* (可选) 稍微调整一下内边距,让滚动条不贴着字 */
  padding-right: 5px; 
}

/* (可选) 美化一下滚动条,让它看起来更现代 */
.custom-more-dropdown-popper .el-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.custom-more-dropdown-popper .el-dropdown-menu::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
</style>
相关推荐
咕噜咕噜啦啦3 天前
CSS3基础
前端·css·css3
沙丁鱼意大利面4 天前
五子棋(javascript)
javascript·css·css3
想起你的日子4 天前
CSS3 弹性盒子(Flex Box)
前端·css3
萧曵 丶4 天前
CSS3 业务开发高频样式
前端·css·css3
Y淑滢潇潇6 天前
WEB 作业 三个练习题
前端·javascript·css3
码上出彩7 天前
H5+CSS3响应式设计实战:基于Flex布局的适配方案
前端·css·css3
你说爱像云 要自在漂浮才美丽7 天前
【HTML5与CSS3】
前端·css3·html5
倪枫7 天前
CSS3——文本样式(字体样式和文本布局)
前端·css·css3
ヤ鬧鬧o.8 天前
HTML安全密码备忘录
前端·javascript·css·html·css3
光影少年9 天前
flex布局和grid布局区别,实现两边固定布局中间自适应
前端·css3·web·ai编程