vue3通过createApp动态渲染dom元素

需求: 需要通过数组循环渲染dom 其中一种类型的dom元素是滚动条 但是是自己封装的内容比较多 不好直接生成dom 所以就通过createApp直接渲染进度条.vue页面 然后挂载到他的父级盒子上

import { createApp } from "vue";
import progressPage from "../views/progress.vue";
//data是进度条页面的propps定义的接受参数的data
// let progressObj = {xxx参数}
 const progressbox = createApp(progressPage, {
      data: progressObj, //传参
    });
    progressbox.mount(`#progressbox-${index}`); //挂载到进度条的父级id上

生成dom的时候需要给样式宽高等 有的是% 需要拿到父级的宽高然后去计算

但是有的父级也是%

要通过 DOM 元素获取其真实的宽度和高度，包括百分比设置的宽度和高度，可以使用 getBoundingClientRect() 方法。

// 获取 DOM 元素
const element = document.getElementById('myElement');

// 获取元素的真实宽度和高度
const rect = element.getBoundingClientRect();
const width = rect.width;
const height = rect.height;

console.log('宽度:', width);
console.log('高度:', height);