Vue中代碼傳送(teleport)的實現
代碼傳送是啥
在Vue中,代碼傳送就是將某部分的代碼從Vue的template標簽下傳送到指定的地方,這個地方通常是body標簽下。在使用Vue編寫界面時,我們都是在html的Body中寫一個div,然後指定一個id,然後在Vue的實例中的template中寫我們的界面代碼,然後由Vue來幫我們將templte中的dom元素渲染到界面上。如下所示:
<!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ template: ` <div> ...界面描述 </div> ` }); const vm = app.mount('#root'); </script>
從上面的代碼可知,我們在Vue實例的template標簽中渲染的dom元素都會掛載到body中的id為root的div下面,如下圖:
這樣本來已經能夠完成大部分界面描述需求瞭,但是有種場景需要我們去解決,那就是比如我們刪除一個內容時,為瞭防止是用戶的誤觸,會彈出一個對話框,然後對話框背後會有一個鋪滿整個窗口的蒙層。假設我們的展示內容的div很小,這時蒙層就隻能展示到我們當前的div中,如下圖:
點擊顯示蒙層的按鈕後:
我們發現,這個蒙層無法覆蓋所有窗口的區域,這很明顯是不符合需求,因為我們所有的界面代碼都會被掛載到body標簽中的id="root"的div中,如果這個div下的界面的大小被固定瞭,那麼蒙層的大小就會被限制,蒙層的做法我們最好放到body標簽中,這樣蒙層就不會收到父DIV的大小限制瞭。那我們的代碼都是在template中編寫的,如何將其傳送到body標簽下呢,這就是本文的內容teleport.
實例解析
為瞭展示Vue傳送的例子,我們在界面的中心寫瞭一個綠色的塊,代表我們的UI,有一個按鈕,點擊後顯示蒙層。如下圖所示:
這個需求就可以使用代碼傳送的技術實現,代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>傳送門</title> <style> .area{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 200px; height: 300px; background: green; } .mask{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; opacity: 0.5; color: #ffff; font-size: 100px; } </style> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> <div id="hello"></div> </body> <script> const app = Vue.createApp({ data(){ return{ show:false, message:'hello world' } }, methods:{ handleClick(){ this.show = !this.show; } }, template: ` <div class="area"> <button @click="handleClick">點擊顯示蒙層</button> <teleport to="#hello"> <div class="mask" v-show="show"> {{message}} <div>海塔燈</div> </div> </teleport> </div> ` }); const vm = app.mount('#root'); </script>
運行結果:
我們可以看到,在template下定義的蒙層代碼就被傳送到body標簽下瞭,傳送代碼的實現也很簡單,就是使用
<teleport to="#hello">要傳送的內容</teleport>
在teleport標簽上,可以是用to="標簽或者是id",假設要傳送到body下,就使用to="body",要傳送到指定的id對應的div下就使用 to="#id名稱"的形式
到此這篇關於Vue中代碼傳送(teleport)的實現的文章就介紹到這瞭,更多相關Vue 代碼傳送內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue3內置組件Teleport使用方法詳解
- Vue封裝全局toast組件的完整實例
- 詳解Vue新增內置組件的使用
- vue3深入學習 nextTick和historyApiFallback
- vue基於Teleport實現Modal組件