Cesium大屏-vue3注册全局组件

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>