快捷導(dǎo)航

Vue中代碼傳送(teleport)的實(shí)現(xiàn)

更新時(shí)間：2023年04月17日 15:26:59 作者：海塔燈

本文主要介紹了Vue中代碼傳送(teleport)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

代碼傳送是啥

在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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue中代碼傳送(teleport)的實(shí)現(xiàn)

目錄

代碼傳送是啥

實(shí)例解析

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具