vue3 js打开vant的popup弹窗,不需要去挂载和导入组

2023-08-01  本文已影响0人  一个小前端程序员

1.创建showPopup文件夹
2.新建文件showPopup/popup.vue

<template>
    <van-popup v-model:show="show" closeable :style="{ padding: '40px' }" @close="handleClose">
        <img :src="props.imgSrc" style="width: 50%;" alt="">
    </van-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const show = ref(true);
const props = defineProps<{
    mountNode: any;
    imgSrc: string;
}>()

const handleClose = () => {
    document.body.removeChild(props.mountNode);
}
</script>

3.新建showPopup/index.ts

import { render, createVNode } from "vue";

import popup from "./popup.vue";

export default function (options: { imgSrc: string }) {
  const { imgSrc } = options; 
  const mountNode = document.createElement("div");
  document.body.appendChild(mountNode);
  const app = createVNode(popup, {
    mountNode,
    imgSrc,
  });
  render(app, mountNode);
}

4.在需要使用过的地方导入

import showPopup from "@/components/showPopup";
showPopup({
  imgSrc: '',
});
上一篇 下一篇

猜你喜欢

热点阅读