vue3自定义组件挂载到body下

最新推荐文章于 2025-05-07 22:07:45 发布

原创最新推荐文章于 2025-05-07 22:07:45 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue.js 专栏收录该内容

46 篇文章

订阅专栏

文章展示了如何在Vue3中使用createApp和mount方法动态挂载一个名为PreviewVideo的组件，该组件包含一个视频预览功能。当组件不再需要时，通过unmount方法进行卸载并从DOM中移除相关节点。在B页面中，点击预览按钮会调用showViewVideo函数，传入URL来显示视频预览。

挂载js

import { createApp } from "vue";
import PreviewVideo from "./PreviewVideo.vue";
// 使用vue3的createApp,以及mount,unmount方法创建挂载实例

export default function showViewVideo(options) {
  // 创建一个节点，并将组件挂载上去
  const mountNode = document.createElement("div");
  document.body.appendChild(mountNode);
  const app = createApp(PreviewVideo, {
    ...options,
    visible: true,
    remove() {
      app.unmount(mountNode); //创建完后要进行销毁
      document.body.removeChild(mountNode);
    },
  });
  return app.mount(mountNode);
}

需要挂载的A组件

<template>
  <Modal
    v-model:visible="modalShow"
    hide-cancel
    title="视频预览"
    width="40%"
    @ok="handleClickOk"
  >
    <div class="videobox">
      <div id="mse"></div>
    </div>
  </Modal>
</template>

<script setup name="previewVideo">
import { nextTick, onMounted, reactive, ref, watch, onUnmounted } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  remove: {
    type: Function, //传入移除节点方法,这里是createApp中的方法
    default: null,
  },
  url: {
    type: String,
    default: "",
  },
});
const modalShow = ref(false);
const playerObj = reactive({
  player: null,
});
modalShow.value = props.visible;
watch(
  () => modalShow.value,
  (val) => {
    !val && props.remove();
  }
);
// ok
function handleClickOk() {
  modalShow.value = false;
}
onMounted(() => {
});
</script>

<style lang="less" scoped>
</style>

需要引用的B页面

<template>
  <div class="previewImgBox" @click="handleClickPreview">预览</div>
</template>

<script setup>
import { watch, ref, computed } from "vue";
import showViewVideo from "./PreviewVideo";

const props = defineProps({
  urls: {
    type: String,
    default: "",
  },
});
// 点击预览
function handleClickPreview() {
  showViewVideo({ url });
}
</script>

<style lang="less" scoped>
</style>