React 中可用 Portal 將 React 的內容掛到預設的根節點以外的地方，在處理彈出視窗、抽屜、下拉選單…等用途上非常好用。Vue3 的 Teleport 也可以達到相同的效果。這邊筆記下實作方法。
內容
為何好用？
只要是彈出視窗、抽屜…等需要呈現「浮動效果」，一般都會使用絕對定位+ z-index 的方式，但隨著畫面效果多元和元件使用量增加，相對位置和 z-index 會越發難以設定。實務上若能將呈現的內容掛到 <body> 節點下的第一子層，會是最容易維護的方式。<Teleport> 就可以幫助開發者達成這一點要求。
Drawer 實作
這回除了使用 Vue3 以外，還有搭配 UnoCss 來進行。由於 UnoCSS 並沒有內建 CSS Reset，所以會需要自行引入。
1. CSS Reset 部分是採用 eric-meyer.css 和一些自定義的 reset-css 設定
2. 用 <Teleport> 將其內的內容給掛到 body 標籤下
3. <Overlay> 設成半透明, fixed，且掛上跟開關 drawer 一樣的觸發行為，就可以達成點擊抽屜以外的區域，關閉抽屜的效果
4. 可用 <Transition> 效果幫其加上動畫效果，但要注意 Transition 掛載的元件，僅能有一個根標籤
