当前位置：首页 > news >正文

vue组件转html

news 来源：原创 2025/6/24 9:08:20

最近做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中可使用extendvNode.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 可以绑定到如关闭弹窗时卸载元素