Teleport 傳送門功能 · vue筆記

[TOC] >[success] # Teleport 傳送門功能這章我們講解一下 **vue3** 提供給我們的 **Teleport 傳送門** ，我們看一看 **傳送門** 是什么，我們該 **如何使用它** 呢？需求：假如我們需要寫一個 **點擊按鈕彈出一個黑色半透明彈窗，遮蓋整個屏幕** ，我們的 **布局代碼以及樣式** 是這樣寫的： **點擊前** ![](https://img.kancloud.cn/f4/91/f491ed4a7d41fdfd267756cea31923a2_701x386.png) **點擊后** ![](https://img.kancloud.cn/3a/bb/3abb64aa2f0b92ff07fc865647ad463d_617x346.png) **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teleport 傳送門功能</title> <style> .area{ position: absolute; left: 50%; top: 50%; /* transform: translateX(-50%); transform: translateY(-50%); */ /* 上面這樣寫下面的會把上面的樣式覆蓋掉，所以要用簡寫的形式*/ transform: translateY(-50%, -50%); width: 200px; height: 300px; background: green; } .mask{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: .5; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Teleport 傳送門 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleBtnClick(){ this.show = !this.show } }, template: ` <div class="area"> <button @click="handleBtnClick">按鈕</button> <div class="mask" v-show="show"></div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 你會發現 **蒙層大小并不是我們想要的全屏的大小** ，這是因為 **黑色蒙層是絕對定位的是自己的父級 area 這個元素，而 area 這個元素的大小只有200 * 300 的大小** ，如果 **我們想實現黑色遮罩層全屏，通常需要把這個遮罩層放入到 body 內，從而變成 body 直接的子級，這樣絕對定位的就是body** ，這樣寫就會 **非常非常的麻煩** ，而 **vue3** 給我們提供了一個 **teleport標簽（傳送門）** ，我們只需要 **用teleport標簽將黑色彈層包裹，并且寫上 to 屬性， to 屬性內寫入我們要傳入到的標簽名稱，就可以將彈窗傳入到想要傳入的標簽內** ， >[success] ## 傳送門功能實現傳送彈窗功能 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teleport 傳送門功能</title> <style> .area{ position: absolute; left: 50%; top: 50%; /* transform: translateX(-50%); transform: translateY(-50%); */ /* 上面這樣寫下面的會把上面的樣式覆蓋掉，所以要用簡寫的形式*/ transform: translateY(-50%, -50%); width: 200px; height: 300px; background: green; } .mask{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: .5; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Teleport 傳送門 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleBtnClick(){ this.show = !this.show } }, template: ` <div class="area"> <button @click="handleBtnClick">按鈕</button> <teleport to="body"> <div class="mask" v-show="show"></div> </teleport> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ ![](https://img.kancloud.cn/53/53/535339a72dc4682f63385b6025b96206_726x387.png) 這樣就實現了我們想要的效果， **全屏的遮蓋效果** ，然而我們也可以 **根據 id 傳送到指定的標簽內** ，下面的案例中就是 **將彈窗盒子傳入了 id 為 hello 的元素中**，代碼如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teleport 傳送門功能</title> <style> .area{ position: absolute; left: 50%; top: 50%; /* transform: translateX(-50%); transform: translateY(-50%); */ /* 上面這樣寫下面的會把上面的樣式覆蓋掉，所以要用簡寫的形式*/ transform: translateY(-50%, -50%); width: 200px; height: 300px; background: green; } .mask{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: .5; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> <div id="hello"></div> </body> <script> // Teleport 傳送門 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleBtnClick(){ this.show = !this.show } }, template: ` <div class="area"> <button @click="handleBtnClick">按鈕</button> <teleport to="#hello"> <div class="mask" v-show="show"></div> </teleport> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 編譯后的代碼如下， **可以看到遮罩層被放入到 id 為 hello 的盒子中** ![](https://img.kancloud.cn/14/6c/146c1aa42c2430c8fb1ec13a412858d3_532x315.png) >[success] # 總結我們可以 **封裝組件** 時，有彈窗的需求，可以用 **teleport 用傳送門功能** 。