前端菜鸡流水账日记 -- checkbox二级菜单滚动条设置

下午好哇，今天二更咯，这次想说的是一个ElemenuUI中的一个组件 -- checkbox多选框，管网的地址是https://element.eleme.cn/#/zh-CN/component/installation，关于这个的具体的写法，感兴趣的小伙伴可以去管网看看，很快就能找到的

我今天要记录的是关于他的二级菜单当盒子的内容过多时，超出屏幕展示的范围将会被自动隐藏起来，而overflow就可以解决这个问题，

关于overflow：

假设场景是这样的，如下图所示，有两个部分，并且都有各自对应的二级，但是很显然第一个的二级，比较多，第二个的比较少，那么如果第一个的继续增加，在超过浏览器的范围之后，就将会被隐藏，那我们要怎么做呢？

可以看到上述的场景假设，如果遇到这样的，那肯定是最开始先找到对应的父元素盒子，在上边进行一个样式的修改，

   <div @click="sign" class="overlay"></div>
    <div
      class="pipe"
      v-show="seen1"
      @mouseenter="enter()"
      @mouseleave="leave"
   }"
    >


样式：
.pipe {
  width: 170px;
  height：400px；
  overflow-y: auto !important ;
}

不出意外的话就是可以实现的了，但是这样会有一个问题，因为设置了高度，所以就会两个一起变化，第二个下边就会空很多，比较不美观，但是不设置高的话overflow是不会生效的，那两全其美的办法就是，在父元素那块，额外新增一个style行内样式，并且使用三元进行判断，如果这个二级的数量超过多少，就设置一个高，否则就不设置，具体的代码就是 --     :style="{ top: legendTop + 'px', 'height': legendList.length > 5 ? '400px' : 'auto' 

 <div
      class="pipe"
      v-show="seen1"
      @mouseenter="enter()"
      @mouseleave="leave"
      :style="{ top: legendTop + 'px', 'height': legendList.length > 5 ? '400px' : 'auto' }"
    >

这样就可以动态的实现，是否有滚动条了，legendLIst.length就是二级列表的数量，>5是因为我的这个案例中少的那个只有五个，可以对应的去修改，这样的话就可以实现，在五个以内就是auto的高度，超过五个就是400px的固定高度啦~~~~

--------------------

额外分享对滚动条的设置的样式，有需要的可以直接使用的（记得把pipe换成对应的样式的名字）

/deep/ .pipe::-webkit-scrollbar {
  width: 4px;
}
/deep/ .pipe::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.15);
}
/deep/ .pipe::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}

好咯，关于这个的我遇到的已经说完啦，下次见~~~~