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