zoukankan      html  css  js  c++  java
  • 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;  非常关键 ,共享上下文
  • 相关阅读:
    设计模式学习笔记之命令模式
    JavaEE复习三
    ubuntu下安装UltraEdit
    转载:Ubuntu下deb包的安装方法
    查看linux系统版本是32位还是64位
    手动编译生成apk
    android service文章转载
    @+android:id的一些记录
    android Tweened Animations
    ubuntu下打开chm文件
  • 原文地址:https://www.cnblogs.com/muamaker/p/14069809.html
Copyright © 2011-2022 走看看