ElementUI dialog弹出层样式优化

html

   <el-dialog :visible.sync="dialog" :title="dialogTitle" :modal-append-to-body="false" append-to-body width="1200px" class="parent-dialog">
     <el-card>
        <canvas id="canvas" :width="canvas.width+'px'" :height="canvas.height+'px'" :key="Math.random()" />
      </el-card>
    </el-dialog>

js

data() 
{
    return {   
      canvas: {
        width: 1000,
        height: 800
      }
      }

css

.parent-dialog .el-dialog {
  // 居中弹框
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  // 防止超出视窗
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  //实现body内部滚动
  display: flex;
  flex-direction: column;
  .el-dialog__body {
    overflow: auto;
  }
}

效果图

让滚动条显示在当前弹框的最右侧，而不是浏览器窗口的最右侧

借鉴自：https://blog.csdn.net/yangwqi/article/details/105774342