1.創(chuàng)建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.在需要使用過的地方導(dǎo)入
import showPopup from "@/components/showPopup";
showPopup({
imgSrc: '',
});
