1.需求

說明：產品經理要求開發人員在地圖大屏上面隨意放置組件，并且需要通過數據庫更改其組件大小，位置等；適用于大屏組件中場站視角、任意位置標題等。

2.實現

2.1GlobalComponents.vue

說明：containerList可以通過發起網絡請求寫在數據庫里面，彰顯靈活性。

<script setup>
const containerList=[{id:"202407012021",name:"測試組件",show:true,componentName:"Demo1",style:{width:"100px",height:"100px",background:"red"}}
]
</script><template><div style="position: relative;pointer-events: none"><template v-for="container in containerList"><component v-show="container.show":is="container.componentName":container="container":show="container.show":ref="container.id" :id="container.id"></component></template></div>
</template><style scoped></style>

2.2GlobalComponents.js

說明：暴露對象，對象里面有個install方法。

import  Demo1 from  "@/components/Demo1.vue"export const globalComponents={install(app){app.component("Demo1", Demo1);}
}

2.3main.js

說明：注冊成全局組件?

// 導入全局組件
import {globalComponents} from "@/components/GlobalComponents.js"globalComponents.install(app)

2.4測試組件

說明：普通的vue3組件（語法糖形式）。

<script setup>
import {onMounted} from "vue";const props=defineProps({container:Object
})
</script><template><div v-if="container.show" :style="container.style" class="container-demo">{{container.name}}</div>
</template><style scoped>
.container-demo{position: absolute;
}</style>

2.5頁面組件

說明：項目啟動后，路由默認打開這個組件。

<template><div>測試</div>
<GlobalComponents></GlobalComponents>
</template><script setup>
import GlobalComponents from "@/components/GlobalComponents.vue"
</script>

2.6效果

?

?

?

?