【mapbox】popup挂载自定义组件（Vue3）

基本思路：将创建的vue文件制作成一个app，然后把这个app挂载在页面上的一个div上，再把这个div传给mapbox的popup。
不知道有没有其他影响，目前用着没问题。

1 创建app.vue

里面的内容随意，props用来接收传过来的值。

<script setup lang="ts">

const props = defineProps({
  tableData: {
    type: Array,
    default: () => [
      {
        attribute: "",
        value: "",
      },
    ],
  },
  title: {
    type: String,
    default: () => "标题",
  },
});
const changeDate = (value: any) => {
  
};
const changeMode = (value: any) => {
  
};
const datePicker = ref("");
</script>

<template>
  <div class="flex justify-center pb-4 text-xl font-bold text-blue-500">
    {{ props.title }}
  </div>
  <el-table
    :data="props.tableData"
    :show-header="false"
    border
    style="width: 100%"
  >
    <el-table-column prop="attribute" width="180" />
    <el-table-column prop="value" min-width="200" />
  </el-table>
</template>

<style scoped lang="scss"></style>

2 挂载组件到界面上

{ title: title, tableData: data }是传到props的值。

import pop from "./app.vue";
import { createApp } from "vue";
import ElementPlus from "element-plus";

export function creatTablePopup(title: string, data: any) {
  const app = createApp(pop, { title: title, tableData: data }).use(
    ElementPlus
  ); // 因为我在app.vue里面用到了element-plus的内容，所以在这里要use一下，不然找不到
  app.config.warnHandler = () => null;	// 控制台不输出警告
  const parent = document.createElement("div");
  const container = document.getElementById("app");
  container?.appendChild(parent);
  const instance = app.mount(parent);
  return parent;
}

参考别人原来是这么写的。
但是vue3没有extend了，所以找了一下实现方法，像上面那样写基本满足我目前的需求。

const p = Vue.extend(pop); //Popup 是一个单独的模板页面 。自定义
    let vm = new p({
      propsData: {
        PopObj: data, //要传输的数据对象
      }, //传参
    });
    vm.$mount(); //挂载
    return vm.$el;

3 传给popup使用

与之前创建div的区别在于 setDOMContent() 函数，之前使用的是 setHTML() 函数，好多东西不好控制。

    const popup = new mapboxgl.Popup({maxWidth: "500"})
	popup.setDOMContent(dom)
         .setLngLat(e.lngLat)
         .addTo(map)

参考：
https://www.jianshu.com/p/9e68e081ab3b
https://blog.csdn.net/qq_14993591/article/details/128235075