vue2.+element 弹窗大小屏固定居中，使用内置滚动条

1.一般来说，el-dialog可以设置center居中，但是它还能整个弹窗动，就不好看了（scss写法）

<style lang="scss" scoped>
.detailDialog :: v-deep { //这个是弹窗外围的容器类名，这里也使用了deep样式穿透，不用应该可以哈
  display: flex;
  justify-content: center;
  aligin-items: center;
  overflow: hidden;
  .el-dialog { //这里就是控制居中了
   position: absolute;
   top:50%;
   left: 50%;
   margin: 0 !important;
   transform: translate(-50%, -50%)；
   max-height: calc(100% - 100px);
   max-with: calc(100% - 100px);
   display: felx;
   flex-direction: column;
  }
 .el-dialog__body {
    overflow: auto;
    padding-top: 0;
   .el-scrollbar {
     .el-scrollbar__wrap {//看需求x或y轴需要滚动
       overflow-x: hidden;
       overflow-y: auto;
     }
     .el-scrollbar__bar.is-vertical {//隐藏滚动条
       right: -6px;
     }
   }
 }
}
</style>

2.还要设置一下el-scrollbar的高度，如果是不同大小的屏幕，则需要动态获取一下

<el-scrollbar wrap-class="scrollar-wrapper" :style="{height: autoHeight}">
 //...这里写你要滚动的内容
</el-scrollbar>

//动态获取屏幕宽高
data() {
  return {
      autoHeight: '600px';
  }
},
created() {
 this.getClientSize();
  window.addEventListener('resize', this.getClientSize)
},
destroyed() {
  window.removeEventListener('resize', this.getClientSize)
}

methods: {
  getClientSize() {
   //const rect = body.getBoundingClientRect(); 在弹窗中没有body，不能用这种方法
  //console.log('rect', rect)
    const Twidth = document.documentElement.clientWidth;
    const Theight = document.documentElement.clientHeight-187;
    this.autoHeight = `${theight}px`
  }
}