【解决方案】UI高度自适应的修改

2022-12-10 11:11:49 浏览数 (1)

myspace

蓝湖UI设计图

整体的布局就是这样一个 Header，一个 sider，还有内容 content，我们要关心的就是 content  区域。

根据设计图 content 区域分成三个容器，A B C

现在是要求 content 区域实现高度响应式，同时 A B 的高度 和 C 的高度一致。

补充：

  • A，B 的宽度可以调整，C 的宽度自适应。
  • A 的高度可以调整，B 的高度自适应。

解决方案Demo

这是一个抽象出来的示意图

html 结构如下

代码语言：javascript复制
<div class="outer">
    <div class="left">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="right"></div>
  </div>

css 布局如下，一整个分成左右两个部分， 然后左边的部分再分上下两部分 ，全部使用 flex 做自适应。

代码语言：javascript复制
.outer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .left {
    display: flex;
    width: 240px;
    margin-right: 8px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    .top {
      height: 50%;
      margin-bottom: 8px;
      background-color: #fff;
    }
    .bottom {
      flex: 1;
      background-color: yellow;
    }
  }
  .right {
    flex: 1;
    background-color: #ff33ff;
  }
}

真实解决场景

  • 按照上面的 html 结构进行重构。
  • 可以与当前 row，col 组件进行兼容。

最终效果如下

副作用

由于修改了代码结构，导致部分容器内元素的 CSS 失效，暂时没有查明原因，以及无法预估后续修改的工作量，单就调整 css 来看应该难度不大，但是细节比较多。

codePage

蓝湖UI设计图

设计图展示划分如下

  • Header 通用
  • Sider 通用
  • Content 自定义

Content区域规划

由于面包屑展示形式不一致，计划放在页面单独管理，所以把面包屑放在 Content 区域进行布局，效果如下

  • outer 最外层容器
  • YsBreadcrumb 面包屑区域
  • box 真正内容的区域

Vue2.x 要求每个组件必须有根节点，所以还需要一个 root

代码语言：javascript复制
  <div class="root">
    <div class="YsBreadcrumb"></div>
    <div class="box">
    </div>
  </div>

Box区域规划

box 区域 划分成 左， 中 ，右 三个部分，其中右部分再细分为 上 下 两个部分。

  • Left
  • Middle
  • Top
  • Bottom
代码语言：javascript复制
<template>
  <div class="root">
    <div class="YsBreadcrumb"></div>
    <div class="box">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right">
        <div class="top"></div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>
</template>
代码语言：javascript复制
.root {
  width: 100%;
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  height: calc(100% - 48px);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .left {
    display: flex;
    margin-right: 8px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: #2f3e59;
  }
  .middle {
    flex: 1;
    background: #2f3e59;
    margin-right: 8px;
    border: 1px solid #fff;
  }
  .right {
    height: 100%;
    display: flex;
    margin-right: 8px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    .top {
      height: 50%;
      margin-bottom: 8px;
      background: #2f3e59;
    }
    .bottom {
      flex: 1;
      background: #2f3e59;
    }
  }
}

真实解决场景

  • 因为可以同时兼容 Flex 和 Col，Row 组件，所以对整体结构影响不大
  • 需要注意的是每层 dom 结构都需要继承上一级的高度（height：100%）
  • 按照设定好的 html 结构对代码进行重构

最终效果如下

动态展示

备注

  • 类名为演示用，应适当修改更具语义化
  • 由于修改了 dom 结构，需要把背景颜色设置在对应的 div 上
  • 颜色当前是写死的，需要在 less 文件中声明共同类名，然后在对应的 dom 节点上添加类名
容器 html css

0 人点赞