VerticalFlexLayout.vue 555 B

123456789101112131415161718192021222324252627282930313233
  1. <!--
  2. 布局
  3. static slot 是传入固定高度,比如面包屑
  4. default slot 是传入高度自动撑开部分
  5. -->
  6. <template>
  7. <div class="flexWrapper">
  8. <div class="staticContent">
  9. <slot name="static"></slot>
  10. </div>
  11. <div class="flexContent">
  12. <slot></slot>
  13. </div>
  14. </div>
  15. </template>
  16. <style scoped>
  17. .flexWrapper {
  18. display: flex;
  19. flex-direction: column;
  20. height: 100%;
  21. }
  22. .staticContent {
  23. flex-shrink: 0;
  24. }
  25. .flexContent {
  26. flex: 1;
  27. overflow-y: auto;
  28. background-color: #fff;
  29. }
  30. </style>