teleport vue

作者：遥岚月刹发布日期:2026-03-07 浏览:44

<template>
  <div>
    <!-- 使用 Teleport 组件将模态框移动到 DOM 的其他位置 -->
    <button @click="openModal">Open Modal</button>

    <teleport to="body">
      <div v-if="isModalOpen" class="modal">
        <div class="modal-content">
          <span @click="closeModal" class="close">&times;</span>
          <p>This is a modal box teleported to the body element.</p>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false,
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
    },
  },
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}
</style>

解释说明

Teleport 组件：<teleport> 是 Vue 3 中的一个新特性，它可以将组件的内容渲染到 DOM 中的其他位置。在这个例子中，我们将模态框 (<div class="modal">) 移动到了 <body> 元素中。
模态框逻辑：通过 v-if="isModalOpen" 控制模态框的显示和隐藏。点击按钮时调用 openModal 方法，设置 isModalOpen 为 true，模态框就会显示；点击关闭按钮时调用 closeModal 方法，设置 isModalOpen 为 false，模态框就会隐藏。
样式：模态框使用了简单的 CSS 样式来居中显示，并添加了一个关闭按钮。

这个示例展示了如何使用 Teleport 将模态框渲染到页面的其他位置，从而避免了一些布局问题或样式冲突。

上一篇：vue关闭eslint

下一篇：vue3回车键触发事件