Vue3 Teleport 將元件指定位置


Posted by hoyi-23 on 2021-08-16

範例:

modal彈跳視窗

沒有Teleport前:

因為觸發Model的按鈕通常會在內層,但是彈跳的視窗應該是要對應整個外層置中。

Teleport用途:

可以指定元件內某些區塊的傳送位置。

<body>
    <div>
        <modal-button></modal-button>
    </div>
<body>
app.component('modal-button',{
    template:`
        <button @click="modal-open = true">
            open full screen modal!
        </button>

        //下面是modal內容
        //運用teleport指定位置
        <teleport to="body">
            <div v-if="modalOpen" class="modal">
                <div>
                    modal content
                    <button @click="modalOpen = false"> Close </button>
                </div>
            </div>
       <teleport>
    `,
    data(){
     return{
         modalOpen: false
     }
    }
})

#Teleport







Related Posts

Day06 3D Pose Baseline(2D資訊預測3Dz軸資訊)

Day06 3D Pose Baseline(2D資訊預測3Dz軸資訊)

Jest "Cannot find module from xxx" issue

Jest "Cannot find module from xxx" issue

CS50 Call Stack

CS50 Call Stack


Comments