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

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

作者: 一个小前端程序员 | 来源:发表于2023-08-01 11:02 被阅读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: '',
});

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/jeiypdtx.html