vue组件转html

最近做webgis的项目时，在地图上添加一些展示元素都是需要html,感觉直接写html太麻烦了所以参考mars3d官方文档并且封装了一下自用函数。

import { App, Component, createApp } from "vue";

/**
 * 将vue组件转换为html字符串
 *
 * @param rootComponent vue组件
 * @param rootProps 传递的props
 * @returns
 */
export function useVue2html(
  rootComponent: Component,
  rootProps?: App<Element>["_props"] | null,
) {
  const { vNode, vNodeDom } = init(rootComponent, rootProps);
  const unmount = vNode.unmount;
  return [vNodeDom, unmount];
}

function init(
  rootComponent: Component,
  rootProps?: App<Element>["_props"] | null,
) {
  const vNodeDom = document.createElement("div");

  const vNode = createApp(rootComponent, rootProps); // vue2中可使用extend
  vNode.mount(vNodeDom);
  return { vNode, vNodeDom };
}

使用案例

const [vHtml, htmlUnmount] = useVue2html(sensorDiv, {
      ...props,
    });

style: {
        html: vHtml,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        scale: 0.2,
      },

这个unmount 可以绑定到如关闭弹窗时卸载元素