VUE动态组件渲染

在某一个页面有多个组件需要同时引入或者按需引入，并且通过后端接口控制显示哪些组件。

<template>
  <div class="item-product-coms">
    <div class="component-box flex-column">
      <div class="module-item-top-name" v-if="moduleData.moduleList && moduleData.moduleList[0].moduleName">
        <span>{{moduleData.moduleList[0].moduleName}}</span>
      </div>
      <component class="item-component flex-column-center" v-for="(item,index) in moduleData.moduleList" :key="index"
        :is="item.componentName" :moduleItem="moduleItemData(item)" :class="'item-id-'+item.id" :type="1" />
    </div>
  </div>
</template>

<script>
// import draggable from 'vuedraggable'
import comsImport from "../js/comsImport";
export default {
  name: "ItemProModule",
  props: ["moduleData"],
  components: {
    ...comsImport.exportComsList,
    // draggable,
  },
  data() {
    return {
      menuTree: JSON.parse(localStorage.getItem("menuTree")),
      /*  largeScreenConfig:{
          baseFontSize:16,
          headerHeight:50,
          smallBaseFontSize:14,
        }*/
    };
  },
  computed: {
    largeScreenConfig() {
      let largeScreenConfig = {};
      let width = document.body.offsetWidth;
      switch (true) {
        case width <= 2000:
          largeScreenConfig = {
            fontSize: 12,
          };
          break;
        case width > 2000 && width <= 3000:
          largeScreenConfig = {
            fontSize: 18,
          };
      }
      return largeScreenConfig;
    },
  },
  methods: {
    moduleItemData(item) {
      let color = "#fff";
      return {
        ...item,
        ...{
          chartConfig: {
            color: color,
            fontSize: this.largeScreenConfig.fontSize,
          },
        },
      };
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="less">
.item-product-coms {
  height: -webkit-calc(100vh - 0px);
  height: 100%;
  /*min-height:400px;*/
  /*min-height: inherit;*/
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 10px;
  box-sizing: border-box;

  .component-box {
    width: 100%;
    flex-grow: 1;
    box-sizing: border-box;
    overflow: hidden;
  }

  .item-component {
    height: 100%;
    width: 100%;
    padding-top: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
  }

  .my-chart {
    margin: auto;
    width: 95%;
    flex-grow: 1;
    /*height:90%;*/
    /*height:200px;*/
  }

  .module-item-top-name {
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    font-size: 22px;
    text-align: center;
    color: #fff;
    margin-bottom: 10px;
  }

  .tmp-hidden {
    display: none;
  }

  .drag-component {
    height: 100%;
  }
  .hide {
    display: none;
  }
}
</style>