vue3—Teleport 传送门功能

佛门与网络

我们设想这样一个场景，在编写vue工程化代码时，如果想将一个全局遮罩挂载到body下，也就是body是遮罩的父级，可往往不尽如意，因层层嵌套，导致没法实现这一功能。再一个布局的问题，比如页面统统使用定位进行布局，那不将遮罩直接放到 body 下会很麻烦
而解决这一问题，vue也提供了方案，那就是：传送门！！！名字很高大上，其实就是直接将组件的 DOM 内容挂载到指定的位置
dom元素：

1. <div id="root"></div>

复制代码

vue 代码示例：

1. const app = Vue.createApp({
   
2.   data() {
   
3.     return {
   
4.       show: false,
   
5.     }
   
6.   },
   
7.   methods:{
   
8.     handleBenClick() {
   
9.       this.show = !this.show;
   
10.     }
    
11.   },
    
12.   template: `
    
13.         <div class="area">
    
14.           <button @click="handleBenClick">按钮</button>
    
15.           <teleport to="body">
    
16.             <div class="mask" v-show="show"></div>
    
17.           </teleport>
    
18.         </div>
    
19.       `
    
20. })
    
21. app.directive('pos', (el, binding)=>{
    
22.   el.style[binding.arg] = binding.value+'px';
    
23. })
    
24. const vm = app.mount('#root');

复制代码