UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. 自己紹介
    00:45
  • 2. Teleportについて
    01:30
  • 3. 「Teleport」の名前について
    10:24
  • 4. ReactにおけるPortal
    16:19
  • 5. Vue 2.x の現場では PortalVue がおすすめ
    21:06
  • 6. クロージング
    24:36

ep.51 Vue 3 Study『Teleport でキレイに解消するモーダルの z-index 問題』

2020/06/26
1062 views
HANATANI Takuma 緑豆はるさめ

@spring_raining が @potato4d に Vue 3 で追加される Teleport (Portal) について話を聴きました。

  • About Vue 3 Study
    • 社内勉強会で開催している Vue 3 の勉強会企画
    • RFC を一つずつ追っていく
    • 今は Vuex, Vue Router の新バージョンのウォッチも継続中
  • Guest
    • @potato4d
  • Teleport
    • いわゆる “Portal” の機能の Vue.js 版
    • 仮想 DOM 上の親子関係を飛び越えて、別の場所にある DOM に対して要素をマウントする機能
  • Portal の必要性と嬉しさ
    • 実 DOM 操作する時代が終わった開発環境における z-index の取り扱いの悩みを解消
      • 頻出するのはモーダル
        • 子孫ではスタックコンテキストが分けられてしまっているため被り順で問題が起こる
        • しかしモーダルの呼び出し元は子孫の要素
        • ただの仮想 DOM の範囲では解決できない
      • Portal がない状態ではいびつな解消法になりがち
        • ライフサイクルフックで実 DOM に反映する
        • リアクティブなデータ共有や Vuex でフラグを管理し、Rootで持つ
      • Portal を使うとこういったいびつな構造を生むことなく解決できる
  • Vue.js の Teleport について
    • Teleport の対象となるDOM要素を事前に用意する
    • 転送したいコンポーネントを <Teleport> タグで囲い、 to でセレクタを指定する
  • 他のフレームワークでの Portal
  • Vue 2.x の現場では PortalVue がおすすめ
10秒前へ 10秒次へ