vue3.0的弹窗

关于vue3.0写一个弹窗

一、官方提供的方法 teleport

<template>
    <teleport to="#modal-container">
          <div class="test">
            <el-button type="primary">这是一个测试</el-button>
          </div>
    </teleport>
</template>
<script>

export default {
    name:"Test"
}
</script>

　　

to 指向的是一个 dom元素 id为 modal-container

 

缺点，只能引入后使用，不能通过js直接调用。

 

于是： 很自然想到 vue2.0 的 vue.extend 方法。 很可惜，没有。。。只能通过  createApp 自己再创建一个上下文、但是问题来了，上下文是不共享的。会出现element-plus组件无法正常显示

 

二、自定义弹出

 

import { createVNode ,render} from 'vue'
const body = document.body;
const root = document.createElement("div");
body.appendChild(root);
root.className = "custom-root";
export default {
    install(app){
        let div = document.createElement("div");
        root.appendChild(div);
        // com 为自己写的组件,  SoltChild 可以是自己的子组件 ，也可以不传
        let vm = createVNode(com,{},{
            // slots
            default:()=>createVNode(SoltChild)
        });
        vm.appContext = app._context; // 这句很关键，关联起了数据
        render(vm,div);
        
    }
}

　　

其中 vm.appContext = app._context;  非常关键 ，共享上下文