Vue3中的Teleport(傳送門)
阿新 • • 發佈：2021-11-08
動畫片多啦A夢相信大家很多都看過，而且近幾年又出現了相關的電影，作為小編一個男生來說，一直是對裡面的靜香念念不忘，有點跑偏了哈，今天小編介紹的Teleport就和多啦A夢的任意門一樣，可以穿梭到任何的DOM中的任何地方
模態框一直是實際開發中用到比較多的功能之一，在沒有各種各樣的元件之前，我們需要通過css中的定位對元素進行修飾，有了Teleport，我們就可以這樣實現一個簡單的模態的元件
<style> .area{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);/* */ width: 200px; height: 300px; background:green; } .mask{ position: absolute; left:0; right:0; top:0; bottom:0; background: #000; opacity: 0.5; } </style> <script> 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>
上面的例子是將元素傳遞到body中，如果要將元素傳遞到指定的DOM節點，我們要怎麼處理呢？
我們通過Teleport中的to屬性，可以將程式碼寫成這樣
<body> <div id="root"></div> <div id="hello"></div> </body> <script> const app = Vue.createApp({ data(){ return { show:false } }, methods:{ handleBtnClick(){ this.show = !this.show } }, template: `<div class="area"> <button @click="handleBtnClick">按鈕</button> // 類似css選擇器，根據DOM元素不同，通過to屬性設定傳送的位置 <teleport to="#hello"> <div class="mask" v-show="show"></div> </teleport> </div>` }) const vm = app.mount("#root") </script>
大家還可以掃描二維碼，關注我的微信公眾號，蝸牛全棧。