样式穿透问题

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>
相关推荐
咔咔一顿操作1 天前
轻量无依赖!autoviwe 页面自适应组件实战:从安装到源码深度解析
javascript·arcgis·npm·css3·html5
a17798877122 天前
小程序为什么 Upload 外层使用 display: flex 时会造成组件样式混乱
css·html·css3
2301_812731413 天前
CSS3笔记
前端·笔记·css3
ziblog3 天前
CSS3白云飘动动画特效
前端·css·css3
越努力越幸运5083 天前
CSS3学习之网格布局grid
前端·学习·css3
ziblog3 天前
CSS3创意精美页面过渡动画效果
前端·css·css3
akangznl3 天前
第四章 初识css3
前端·css·css3·html5
会豪3 天前
深入理解 CSS3 滤镜(filter):从基础到实战进阶
前端·css·css3
头顶一只喵喵3 天前
CSS3进阶知识:CSS3盒子模型,box-sizing:content-box和box-sizing:border-box的讲解
前端·css·css3
陈振wx:zchen20083 天前
CSS2-3
css·css3·css2