然后，添加下位置判断

function createDom(){
  const left = select.value.offsetLeft + "px"
  const width = select.value.getBoundingClientRect().left + "px"
  const props = {
    width,
    left,
  }
  //1、创造包裹虚拟节点的div元素
  const container = document.createElement('div');
  //2、创造虚拟节点
  let vm = createVNode(Select,props)
  //3、将虚拟节点创造成真实DOM
  render (vm, container)
  //4、将渲染的结果放到body下
  document.body.appendChild(container.firstElementChild) 
}

其中，prop是传递给Select组件的距离参数，在组件内设置即可。

销毁组件

销毁组件，我们可以使用render渲染一个空对象即可

render (vm, container)

如果需要子组件来销毁自身，我们可以使用父子传值

const emit = defineEmits(['destroy'])
function beforeUnload(){
 emit('destroy')
}

父组件里，我们需要在props中添加一个onDestroy函数，注意：onDestroy是驼峰式写法

function createDom(){
  const left = select.value.offsetLeft + "px"
  const width = select.value.getBoundingClientRect().left + "px"
  const props = {
    width,
    left,
    onDestroy: () => {
      render(null, container)
    },
  }
  //1、创造包裹虚拟节点的div元素
  const container = document.createElement('div');
  //2、创造虚拟节点
  let vm = createVNode(Select,props)
  //3、将虚拟节点创造成真实DOM
  render (vm, container)
  //4、将渲染的结果放到body下
  document.body.appendChild(container.firstElementChild) 
}