Vue中代碼傳送(teleport)的實(shí)現(xiàn)
代碼傳送是啥
在Vue中,代碼傳送就是將某部分的代碼從Vue的template標(biāo)簽下傳送到指定的地方,這個(gè)地方通常是body標(biāo)簽下。在使用Vue編寫界面時(shí),我們都是在html的Body中寫一個(gè)div,然后指定一個(gè)id,然后在Vue的實(shí)例中的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實(shí)例的template標(biāo)簽中渲染的dom元素都會(huì)掛載到body中的id為root的div下面,如下圖:
這樣本來已經(jīng)能夠完成大部分界面描述需求了,但是有種場景需要我們?nèi)ソ鉀Q,那就是比如我們刪除一個(gè)內(nèi)容時(shí),為了防止是用戶的誤觸,會(huì)彈出一個(gè)對話框,然后對話框背后會(huì)有一個(gè)鋪滿整個(gè)窗口的蒙層。假設(shè)我們的展示內(nèi)容的div很小,這時(shí)蒙層就只能展示到我們當(dāng)前的div中,如下圖:
點(diǎn)擊顯示蒙層的按鈕后:
我們發(fā)現(xiàn),這個(gè)蒙層無法覆蓋所有窗口的區(qū)域,這很明顯是不符合需求,因?yàn)槲覀兯械慕缑娲a都會(huì)被掛載到body標(biāo)簽中的id="root"的div中,如果這個(gè)div下的界面的大小被固定了,那么蒙層的大小就會(huì)被限制,蒙層的做法我們最好放到body標(biāo)簽中,這樣蒙層就不會(huì)收到父DIV的大小限制了。那我們的代碼都是在template中編寫的,如何將其傳送到body標(biāo)簽下呢,這就是本文的內(nèi)容teleport.
實(shí)例解析
為了展示Vue傳送的例子,我們在界面的中心寫了一個(gè)綠色的塊,代表我們的UI,有一個(gè)按鈕,點(diǎn)擊后顯示蒙層。如下圖所示:
這個(gè)需求就可以使用代碼傳送的技術(shù)實(shí)現(xiàn),代碼如下:
<!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">點(diǎn)擊顯示蒙層</button> <teleport to="#hello"> <div class="mask" v-show="show"> {{message}} <div>海塔燈</div> </div> </teleport> </div> ` }); const vm = app.mount('#root'); </script>
運(yùn)行結(jié)果:
我們可以看到,在template下定義的蒙層代碼就被傳送到body標(biāo)簽下了,傳送代碼的實(shí)現(xiàn)也很簡單,就是使用
<teleport to="#hello">要傳送的內(nèi)容</teleport>
在teleport標(biāo)簽上,可以是用to="標(biāo)簽或者是id",假設(shè)要傳送到body下,就使用to="body",要傳送到指定的id對應(yīng)的div下就使用 to="#id名稱"的形式
到此這篇關(guān)于Vue中代碼傳送(teleport)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 代碼傳送內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue3中內(nèi)置組件Teleport的基本使用與典型案例
- Vue3?源碼解讀之?Teleport?組件使用示例
- vue3新增Teleport的問題
- Vue中使用Teleport的方法示例
- vue2如何實(shí)現(xiàn)vue3的teleport
- vue3 teleport的使用案例詳解
- Vue3內(nèi)置組件Teleport使用方法詳解
- vue基于Teleport實(shí)現(xiàn)Modal組件
- 詳解Vue3中Teleport的使用
- vue3 Teleport瞬間移動(dòng)函數(shù)使用方法詳解
- 詳解Vue3 Teleport 的實(shí)踐及原理
- Vue內(nèi)置組件Teleport的使用
相關(guān)文章
vue-cli 3.0 版本與3.0以下版本在搭建項(xiàng)目時(shí)的區(qū)別詳解
這篇文章主要介紹了vue-cli 3.0 版本與3.0以下版本在搭建項(xiàng)目時(shí)的區(qū)別詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
這篇文章主要介紹了vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Vue實(shí)現(xiàn)首頁banner自動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)首頁banner自動(dòng)輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-11-11vue使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對應(yīng)的PDF
這篇文章主要為大家詳細(xì)介紹了vue如何使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對應(yīng)的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08