Vue 3 - Teleport – 竹白記事本

簡介

Teleport 是 Vue 3 新增的功能，它是一個內建元件 <teleport>，可以讓我們將模板內的 DOM 渲染到指定位置。

Vue 的 Teleport 類似於 React 的 Portals。

使用場景

在開發過程中，常常會使用到 Modal、Alert、Message 等這類視覺上有「跳出」容器感覺的元件。這類元件通常會顯示在最上層，並且使用 position: fixed 定位視窗，還有覆蓋整個視窗的遮罩。

但通常這類元件會放置在某個元件內，那麼就必須要處理定位、層疊樣式、溢出邊界等等問題（例如，父元素若使用了 transform 會導致 position: fixed 失效）。若放置在最外層，資料狀態的傳遞就變的麻煩。

現在你可以使用 <teleport> 將元件渲染到父元件以外的地方。

Teleport 語法

<teleport> 有兩個 prop：

to（字串）
disabled（布林值，可選）

1. to

to 可以指定將在其中移動 <teleport> 內容的目標元素。

值必須是 有效的查詢選擇器 或 HTML 元素：

1
2
3
4
5
6
7
8


<!-- 正確 -->
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

<!-- 錯誤 -->
<teleport to="h1" />
<teleport to="some-string" />

2. disabled

disabled 預設值為 false，設為 true 可用於禁用 <teleport> 的功能。

應用：

1
2
3


<teleport to="#popup" :disabled="displayVideoInline">
  <video src="./my-movie.mp4">
</teleport>

使用 Teleport 將 .modal 渲染到 <body> 下，就不會受到上層元素的 CSS 影響。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


const ModalButton = {
  props: ['show'],
  emits: ['update:show'],
  template:`
    <button type="button" @click="$emit('update:show', true)">show</button>
    <teleport to="body">
      <div v-if="show" class="modal">
        <div class="modal-container">
          <h2>Modal</h2>
          <button @click="$emit('update:show', false)">close</button>
        </div>
      </div>
    </teleport>
  `,
};

CodePen Demo：Vue 3.x - Teleport modal

Vue 3 - Teleport

簡介

使用場景

Teleport 語法

1. to

2. disabled

Modal 元件應用

相關內容

文章目錄