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>從上面的代碼可知，我們?cè)赩ue實(shí)例的template標(biāo)簽中渲染的dom元素都會(huì)掛載到body中的id為root的div下面，如下圖：
這樣本來已經(jīng)能夠完成大部分界面描述需求了，但是有種場(chǎng)景需要我們?nèi)ソ鉀Q，那就是比如我們刪除一個(gè)內(nèi)容時(shí)，為了防止是用戶的誤觸，會(huì)彈出一個(gè)對(duì)話框，然后對(duì)話框背后會(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傳送的例子，我們?cè)诮缑娴闹行膶懥艘粋€(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)也很簡(jiǎn)單，就是使用
<teleport to="#hello">要傳送的內(nèi)容</teleport>
在teleport標(biāo)簽上，可以是用to="標(biāo)簽或者是id",假設(shè)要傳送到body下，就使用to="body",要傳送到指定的id對(duì)應(yīng)的div下就使用 to="#id名稱"的形式
到此這篇關(guān)于Vue中代碼傳送(teleport)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 代碼傳送內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(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轉(zhuǎn)electron項(xiàng)目及解決使用fs報(bào)錯(cuò):Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關(guān)于vue轉(zhuǎn)electron項(xiàng)目及解決使用fs報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue設(shè)置代理不起作用問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
Vue通過URL傳參如何控制全局console.log的開關(guān)詳解
這篇文章主要給大家介紹了關(guān)于Vue根據(jù)URL傳參如何控制全局console.log開關(guān)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-12-12
Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題
這篇文章主要介紹了Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題,本文以vue、vuex、vue-touter為例，給大家介紹處理流程，需要的朋友可以參考下2018-04-04
這篇文章主要給大家介紹了Vue.js實(shí)戰(zhàn)之Vuex的入門教程，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
vue移動(dòng)端html5頁(yè)面根據(jù)屏幕適配的四種解決方法
在vue移動(dòng)端h5頁(yè)面當(dāng)中，其中適配是經(jīng)常會(huì)遇到的問題，這塊主要有四個(gè)方法可以適用。這篇文章主要介紹了vue移動(dòng)端h5頁(yè)面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下2018-10-10
vue router 跳轉(zhuǎn)時(shí)打開新頁(yè)面的示例方法
這篇文章主要介紹了vue router 跳轉(zhuǎn)時(shí)打開新頁(yè)面的示例方法，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章給大家分享了vue axios二次封裝的相關(guān)知識(shí)點(diǎn)等內(nèi)容以及實(shí)例代碼，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07