Cesium大屏-vue3注册全局组件

news2025/11/4 18:06:33

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>