基于vue3原生地图弹框嵌入vue3模板

vue3 中地图弹框引用组件模板：

项目中使用vue3往往会引用地图组件，或地图框架，往往会在地图弹框嵌入自己想要的模板，例如mapbox弹框引用echarts和element-plus组件

---

问题描述

第一种方式 直接用 createApp mount 挂载

// 1. 地图弹框

new mapboxgl.Popup({
              offset: {
                'top': [0, 0],
                'top-left': [0, 0],
                'top-right': [0, 0],
              }
            })
            .setLngLat(coordinates)
            .setMaxWidth('none')
            .setHTML('
')
            .addTo(state.map);
            
            
 // 2. 需要引入模板 Test 这里全局注册Element-plus
 
 const newPopup = defineComponent({
       extends: Test,
       setup() {
           const title = ref('原始标题')
           onMounted(()=>{
              title.value = '这是更改的标题'
           })

          return { title };
          },
         });
       nextTick(() => {
          const app1 = createApp(newPopup)
                app1.use(ElementPlus)
                app1.mount('#test');
         });


// 3. Test.vue

<template>
<div>
  <h1>{{ title }}</h1>
  <el-tag type="success">这是Element-plus的el-tag组件</el-tag>
  <h1>{{test}}</h1>
</div>
</template>

第二种方式 利用 createVNode 和 render 函数

function install(app) {
            let div = document.createElement("div");
            app.appendChild(div)
            let vm = createVNode(WindowInfo, {option: option1, option: option2}, {
              default: () => {
              }
            })
            vm.appContext = app._context
            render(vm, div)
          }

引用 install 即可

效果图

第一种方式效果图

    const html = `

${e.features[0].properties.name}

`

    //通过模板内id注入编译后的vue组件代码
    const app = createVNode(waterPoint, {
        pointNo: e.features[0].properties.pointNo,
    });

    mountNode = document.createElement("div");
    mountNode.style = "display:flex;flex:1;";
    render(app, mountNode);
    //mapbox插入弹框代码方法
    new mapboxgl.Popup({ offset: popupOffsets })
        .setMaxWidth('none')
        .setLngLat(coordinates)
        .setHTML(html)
        .addTo(map)

    document.getElementById('vue-detail-tip').appendChild(mountNode);