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

本文介绍了如何使用Vue2.x的动态组件和CSS flex布局来整合多个可视化页面,实现大屏展示。通过动态设置HTML结构,结合data和components中的配置,实现了组件按比例和顺序排列。在CSS中利用flex布局分配各组件的大小,JavaScript部分则引入并组织组件。最终达到根据配置动态渲染组件并调整布局的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

一、问题

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

二、解决

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

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

  • 根据返回的数据动态设置屏幕的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>
    
  • datacomponents中的部分参数如下:

    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)的值,保证动态组件componentis属性绑定组件名与引入组件名同名即可,这里如何操作数组screenSet配置小屏就按需求操作即可,下面是screenSet的数据结构,仅作参考不做赘述
    在这里插入图片描述

  • 最终效果如下:
    在这里插入图片描述
    这样问题就解决了,如果有更好的方法欢迎补充讨论🌈

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值