<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # Teleport 傳送門功能 這章我們講解一下 **vue3** 提供給我們的 **Teleport 傳送門** ,我們看一看 **傳送門** 是什么,我們該 **如何使用它** 呢? 需求:假如我們需要寫一個 **點擊按鈕彈出一個黑色半透明彈窗,遮蓋整個屏幕** ,我們的 **布局代碼以及樣式** 是這樣寫的: **點擊前** ![](https://img.kancloud.cn/f4/91/f491ed4a7d41fdfd267756cea31923a2_701x386.png) **點擊后** ![](https://img.kancloud.cn/3a/bb/3abb64aa2f0b92ff07fc865647ad463d_617x346.png) **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teleport 傳送門功能</title> <style> .area{ position: absolute; left: 50%; top: 50%; /* transform: translateX(-50%); transform: translateY(-50%); */ /* 上面這樣寫下面的會把上面的樣式覆蓋掉,所以要用簡寫的形式*/ transform: translateY(-50%, -50%); width: 200px; height: 300px; background: green; } .mask{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: .5; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Teleport 傳送門 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleBtnClick(){ this.show = !this.show } }, template: ` <div class="area"> <button @click="handleBtnClick">按鈕</button> <div class="mask" v-show="show"></div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 你會發現 **蒙層大小并不是我們想要的全屏的大小** ,這是因為 **黑色蒙層是絕對定位的是自己的父級 area 這個元素,而 area 這個元素的大小只有200 * 300 的大小** ,如果 **我們想實現黑色遮罩層全屏,通常需要把這個遮罩層放入到 body 內,從而變成 body 直接的子級,這樣絕對定位的就是body** ,這樣寫就會 **非常非常的麻煩** ,而 **vue3** 給我們提供了一個 **teleport標簽(傳送門)** ,我們只需要 **用teleport標簽 將黑色彈層包裹,并且寫上 to 屬性, to 屬性 內寫入我們要傳入到的標簽名稱,就可以將彈窗傳入到想要傳入的標簽內** , >[success] ## 傳送門功能實現傳送彈窗功能 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teleport 傳送門功能</title> <style> .area{ position: absolute; left: 50%; top: 50%; /* transform: translateX(-50%); transform: translateY(-50%); */ /* 上面這樣寫下面的會把上面的樣式覆蓋掉,所以要用簡寫的形式*/ transform: translateY(-50%, -50%); width: 200px; height: 300px; background: green; } .mask{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: .5; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Teleport 傳送門 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleBtnClick(){ this.show = !this.show } }, template: ` <div class="area"> <button @click="handleBtnClick">按鈕</button> <teleport to="body"> <div class="mask" v-show="show"></div> </teleport> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ ![](https://img.kancloud.cn/53/53/535339a72dc4682f63385b6025b96206_726x387.png) 這樣就實現了我們想要的效果, **全屏的遮蓋效果** , 然而我們也可以 **根據 id 傳送到指定的標簽內** ,下面的案例中就是 **將彈窗盒子傳入了 id 為 hello 的元素中**,代碼如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teleport 傳送門功能</title> <style> .area{ position: absolute; left: 50%; top: 50%; /* transform: translateX(-50%); transform: translateY(-50%); */ /* 上面這樣寫下面的會把上面的樣式覆蓋掉,所以要用簡寫的形式*/ transform: translateY(-50%, -50%); width: 200px; height: 300px; background: green; } .mask{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: .5; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> <div id="hello"></div> </body> <script> // Teleport 傳送門 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleBtnClick(){ this.show = !this.show } }, template: ` <div class="area"> <button @click="handleBtnClick">按鈕</button> <teleport to="#hello"> <div class="mask" v-show="show"></div> </teleport> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 編譯后的代碼如下, **可以看到遮罩層被放入到 id 為 hello 的盒子中** ![](https://img.kancloud.cn/14/6c/146c1aa42c2430c8fb1ec13a412858d3_532x315.png) >[success] # 總結 我們可以 **封裝組件** 時,有彈窗的需求,可以用 **teleport 用傳送門功能** 。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看