Vue2.x动态组件的使用实现组件整合大屏展示

Vue2.x动态组件的使用实现组件整合大屏展示

一、问题

• 项目中开发多个可视化的页面（组件），现需要根据选择的数据和屏幕的配置数据将多个页面整合在同一个页面内，并且根据配置数据划分占比以及位置关系（横向位置，垂直高度统一，横向宽度根据配置数据的占比进行划分）
• 大致效果如图所示，横向排列，按照数据中小屏组件数据的先后顺序进行排列即可：
  

二、解决

• 解决思路，主要利用Vue的动态组件，配合CSS的flex布局方式实现

• 首先最好将大屏的页面路由放在一级路由下，单独的一个界面，这样大屏界面的样式不会受到其它界面的影响

• 根据返回的数据动态设置屏幕的html部分代码如下，利用component动态组件，通过is属性绑定所需组件的名称，这里的名称与import引入的组件名称保持一致

  <template>
    <div
      class="big-screen"
      :style="`width:${screenWidth}px;height:${screenHeight}px;`"
    >
      <div class="big-screen-title">
        <h1>{{screenTitle}}</h1>
      </div>
      <!-- 此处减去标题的高度50px -->
      <div
        class="model-item"
        v-for="item in screenSet"
        :key="item.key"
        :style="`height:${screenHeight-50}px;flex:${item.screenProportion};`"
      >
        <component :is="item.componetType"></component>
      </div>
    </div>
  </template>
  

• data和components中的部分参数如下：

  data() {
  	return{
        screenTitle: '--', // 大屏标题
        screenWidth: '100', // 当前大屏的宽度默认100px
        screenHeight: '100', // 当前大屏的高度默认100px
        screenSet: [], // 大屏配置中每个小屏配置数据
  	}
  },
  components: {
  	InsideTopo,
  	InsideMap,
  	InsideMatrix
  }
  

• CSS部分代码如下，利用flex布局，动态划分所占的份数

  <style scoped lang="less">
  .big-screen {
    background: #000000;
    display: flex;
    justify-content: flex-start;
    position: relative;
    // 大屏标题
    .big-screen-title {
      width: 100%;
      height: 50px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000000;
      h1 {
        font-size: 36px;
        color: #ddfaff;
        letter-spacing: 3px;
        text-shadow: 0px 3px 10px rgb(0 147 255 / 85%);
      }
    }
    .model-item {
      margin-top: 50px;
    }
  }
  </style>
  

• JavaScript部分将所需要的组件引入，根据需求逻辑，将组件和配置信息存入数组中，在大屏页面created的钩子函数中初始化数组，之后动态组件会根据数组内容将组件进行渲染，组件位置问题也根据数组的中的顺序从左到右进行展示

  // 引入可视化组件
  import InsideTopo from '@/pages/visual/InsideTopo'
  import InsideMap from '@/pages/visual/InsideMap'
  import InsideMatrix from '@/pages/visual/InsideMatrix'
  

• 数组的大致结构如下，其中componentType为引入的组件名称，screenProportion是该组件所占的大小（flex）的值，保证动态组件component中is属性绑定组件名与引入组件名同名即可，这里如何操作数组screenSet配置小屏就按需求操作即可，下面是screenSet的数据结构，仅作参考不做赘述
  

• 最终效果如下：
  
  这样问题就解决了，如果有更好的方法欢迎补充讨论🌈