使用vue组件实现mars3d的popup或tooltip以popup为例，如果想自定义popup的内容，就需要传入ht

以popup为例，如果想自定义popup的内容，就需要传入html格式的字符串，像下面这样

const position = [117.229619, 31.8, 1521]
map.openPopup(position, "<div>hello mars3d<div/>")

如果html的内容比较复杂，或者一些需要交互的场景，实现起来就非常的繁琐。在vue3.0中可以通过vue对webComponent的支持，通过vue的单文件组件实现类似的需求。比如我们需要实现一个带按钮的popup。

首先新建一个 button.ce.vue 的文件，注意这里不同于普通的vue文件，扩展命前面的 .ce是必须的

<template>
  <my-button type="primary" @click="tanchu('sample-pannel')">测试1</my-button>
  <my-button type="primary" @click="tanchu('my-widget')">测试1</my-button>
</template>

<script setup lang="ts">
import { Button as MyButton } from "ant-design-vue"
const tanchu = (message) => {
  alert(message)
}
</script>
<style lang="less">
@import "ant-design-vue/lib/button/style/index.less";
</style>

写法就和一个普通的vue单文件组件区别不大

注册webComponent

import { defineCustomElement } from "vue"
import MyButton from "./button.ce.vue"

const MyElement = defineCustomElement(MyButton)

customElements.define("my-element", MyElement)

此时我们就可以像使用普通的html一样使用 my-element标签了

调用

const position = [117.229619, 31.8, 1521]
map.openPopup(position, "<my-element><my-element/>")