element-ui的el-dialog主体滚动的小技巧

一. 场景

element-ui的el-dialog的主体内容变多的时候，应该需要滚动条，所以解决方式：

1. 局部/全局设置样式；
2. el-dialog源码改造。

注意：看完了解思路，掌握max-height和overflow:auto的联合使用，el-scroll的使用即可

二. 方案一

• 仅针对el-dialog__body的部分做处理,
• max-height：可以让内容少于自己限制的高度的时候,自己撑开,200px是自己自定义的
• scss代码是全局的
• 用法:

复制<el-dialog class="global-dialog"></el-dialog>

复制.global-dialog {
  .el-dialog__body {
    max-height: calc(100vh - 300px));
    overflow: auto;
  }
}

三. 方案二

利用固定容器最大高度和flex布局限制el-dialog__body

• 用法:

复制<el-dialog class="global-dialog"></el-dialog>

复制.global-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .el-dialog {
    margin: 0!important;
    max-height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .el-dialog__body {
    overflow: auto;
  }
}

优点：这种方案，可以始终保持弹窗居中

四. 方案三

• 重新创建dialog,覆盖原来element-ui的el-dialog，Vue.component('elDialog', myDialog)
• 新写的myDialog组件prop属性"isScroll"决定了是否开启滚动

复制<div v-if="rendered" class="el-dialog__body">
          <el-scrollbar v-if="isScroll" :style="{ 'height': 'calc(90vh - 150px)' }">
            <slot />
          </el-scrollbar>
          <template v-else>
            <slot />
          </template>
</div>

复制// 必要的
//隐藏底部原始滚动条
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
}

五. 优化

• 使用方案一或者方案二，同时把原始滚动条的样式改成element-ui的
  

复制// 滚动条的宽度
::-webkit-scrollbar {
  // opacity: 0;
  transition: opacity 340ms ease-out;
  width: 6px;
  cursor: pointer;
  background-color: yellow;
  // &:hover {
  //   opacity: 1;
   
  // }
}

// 滚动条的设置
::-webkit-scrollbar-thumb {
  display: block;
  width: 100%;
  background-color: rgba(144,147,153,.3);
  transition: .3s background-color;
  border-radius: 4px;
  &:hover {
    background-color: rgba(144,147,153,.5);
  }
}