學習内容：
1）teleport傳送門。
傳送門它到底是什麼？我們該如何使用它？
teleport傳送門。
假如現在我寫這樣的一個功能：
代碼示例：
a)樣式：
解讀代碼：
參考連結：https://www.w3schools.com/css/css_positioning.asp
// 案例
position: absolute;
位置: 絕對;
left: 150px;
左: 150px;
width: 200px;
寬度: 200px;
height: 120px;
高度: 120px;
top:
頂部
transform:
轉換：定義二維 // https://www.w3schools.com/cssref/css3_pr_transform.php
background: ;
背景: b)
解讀代碼：
我在最外層寫一個 div，然後給它一個class，等于比如說area這樣的class。
此時效果圖：
我們來看一下這個按鈕，我現在在這個區域想點選按鈕，彈出一個蒙層，把整個螢幕都給它蒙上，我該怎麼寫？
代碼示例：
我會在這裡我加一個div，它裡面什麼内容也沒有，是以我這裡直接寫一個 class 等于 mask，
然後我們通過一個資料來控制它， show一開始是false，
代碼示例：
這塊我寫個v杠show等于這個show【第39行】，然後點選的時候
@click
等于一個 handleBtnClick。
methods 裡面我們去寫一些内容，這裡給
this.show
取反。
我們先在這寫一點内容，比如說123：
阿根廷。
我們看不到效果是什麼原因？是這個字也是黑色的，是以我去對 mask 做一些修飾，比如說這裡我給一個color，井号 fff就行了：
效果：
儲存重新整理，我們點選按鈕，它會展示再點選它會隐藏。
我現在做的不是這樣的一個文字展示，我做的是一個蒙層，把整個頁面都給蒙上，是以 mask 我不是需要這種顔色的，是以我把 mask對應的内容也都幹掉，它就是一個普通的div标簽：
這個标簽它要變成一個蒙層，我就要寫蒙層的樣式，我該怎麼寫？
position 給它來一個absolute，然後給它一個left0，right 0，然後給一個top 0，bottom 0，
也就是說我希望它把整個螢幕都蓋住.
然後 background我們給它一個井号黑色，
然後再給它一個什麼 opacity 給它一個0.5半透明，儲存，然後為了看起來清楚點，我把這上面的黑色變成一個 比如說其他的顔色叫green：
儲存一下，刷一下，點選，大家可以看到其實已經有一個蒙層了：
但這個蒙層它是蒙在哪裡的呢？
它是蒙在中間的 div 區塊上的，而不是蒙在整個螢幕上的，為什麼是這樣的？
因為我們現在的 div标簽它是在 area 這樣的一個區域裡面的：
在這個區裡面做絕對定位的時候，它的位置會相對于父元素的絕對定位的位置，是以你 left right top bottom都是相對于父元素的上右下左的距離，
是以它會把整個父元素蓋滿，但不會蓋滿整個螢幕。是以如果你做這種蒙層效果的時候，如果這麼去寫代碼， div寫在 area 裡面去做的話，
基本上實作這個效果會很麻煩。正确的做法應該是什麼?
正确的做法應該是這個标簽，我應該把它放到body裡面去。大家想我如果想把它放到body裡面去，我該怎麼處理?
我是不是要操作 dom 是不是很麻煩？有的時候處理這樣的情景，我們就可以使用 Vue 裡面提供給我們的一個teleport這樣的傳送門的功能。
我們的本身 div 标簽現在是展示在 class等于area的這樣的一個 div 标簽裡面的，
但我們可以通過傳送門的方式把它直接傳送到body這個标簽上面去。
我們看一下什麼意思，先到浏覽器上面，我們看一下現在的 dom 結構:
我們能看到現在 mask 它是在 area 下面的，
那麼在area下面就會導緻它的樣式渲染隻能渲染 area 這一個區域，
如果把它放到body下面，直接挂在 body下面的話，那是不是它的父元素就是body了呀？
那麼它是不是就能把整個螢幕給撐起來？想做到這一點，我們就可以使用傳送門這個功能了。
我們到這裡在 mask外層加一個标簽叫做teleport，它就是一個傳送門，
它接收一個參數叫做to等于body這個标簽：
意思就是我在渲染的時候要把這個div标簽不渲染在 class等于area這樣的一個div标簽上，而是直接把它傳送到對應的 body标簽上面去。
儲存之後我們再回到頁面上刷一下點選按鈕，大家看是不是全屏就已經變成灰色：
為什麼？
這個時候你看你的 mask 是不是直接挂到body下面了？
而在這個area裡面已經沒有mask了：
它說 teleport start teleport end 把這塊的内容已經挂到mask下面去了。是以通過teleport這樣的一個傳送門的功能，我們能夠把一個元件裡的某些元素或者某些元件直接挂到其他的一些dom的位置上面去，比如你可以挂到body上面，當然你也可以挂到一些比如其他的div标簽上，在這裡我可以在這比如說我寫一個div 等于hello，寫這樣的一個div标簽：
那麼我也可以直接把它傳送到這裡，怎麼傳送這塊我就不寫body了，我直接寫井号 hello：
它代表的就是傳送到 id 等于hello的這樣的一個元素節點上，我們這麼寫完之後重新整理一下點選按鈕，hello下面就會多一個mask: