Vue3 将组件挂载到指定 Dom

// index.vue
let sidebarShow: any;
const createDialog = async (visible: boolean, data?: any) => {
  const HelloWorld = (await import("../components/Sidebar.vue")).default;
  let app = createApp(
    h(HelloWorld, {
      visible,
      data,
    })
  );
  if (!sidebarShow) sidebarShow = app;
  if (visible) {
    sidebarShow.mount(".hahaah");
  } else {
    sidebarShow.unmount();
    sidebarShow = null;
  }
}; 

/ sidebar.vue
<template>
  <div v-show="visible">
    <ul class="sidebar">
      <li v-for="item in shareStatusList" :key="item" style="list-style-type:none;margin-bottom:5px;"><a
          onmouseover="this.style.color='red'" onmouseout="this.style.color='#606266'" style="cursor: pointer;"
          @click="jump(item.value)">
          {{item.label}}</a></li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: Array,
  },
  setup(props, context) {
    const shareStatusList = ref(props.data);
    context.emit("update:visible", props.visible);

    const jump = (name: string) => {
      let docu = document.getElementsByName(name) as NodeListOf<HTMLElement>;
      docu[0].scrollIntoView({ behavior: "smooth" });
      console.log(docu);
    };
    return { shareStatusList, jump };
  },
});
</script>

<style lang="scss" scoped>
.sidebar {
  z-index: 99999999;
  position: absolute;
  top: 0;
  right: 0%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 10px;
}
</style>