面试题：Vue Teleport中等难度应用场景题

场景一：模态框（Modal）

场景描述：在电商项目中，经常会有需要弹出模态框的场景，如商品详情中的购买确认框、登录注册模态框等。如果将模态框直接写在组件内部，其层级可能受限于父组件的 CSS 样式，导致显示效果不佳，例如被父元素的 overflow: hidden 截断等问题。

实现思路：

在组件中定义模态框的模板结构，例如：

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <h2>购买确认</h2>
          <p>您确定要购买该商品吗？</p>
          <button @click="showModal = false">取消</button>
          <button @click="handlePurchase">确认购买</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

在 script 部分定义数据和方法：

export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    handlePurchase() {
      // 处理购买逻辑
    }
  }
};

在 style 部分定义模态框样式：

.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; }

通过 `teleport to="body"` 将模态框内容渲染到 `body` 元素下，这样可以避免受父组件样式的影响，保证模态框能正常显示。

### 场景二：全局提示框（Toast）
- **场景描述**：在电商操作过程中，需要实时给用户一些简短的提示信息，如 “商品添加到购物车成功”。这些提示框最好能在页面的全局位置显示，不希望受特定组件布局的限制。
- **实现思路**：
1. 创建一个提示框组件，例如 `Toast.vue`：
```html
<template>
  <teleport to="body">
    <div v-if="isVisible" class="toast">
      {{ message }}
    </div>
  </teleport>
</template>

在 script 部分定义数据和方法：

export default {
  data() {
    return {
      isVisible: false,
      message: ''
    };
  },
  methods: {
    showToast(msg) {
      this.message = msg;
      this.isVisible = true;
      setTimeout(() => {
        this.isVisible = false;
      }, 2000);
    }
  }
};

在主组件或其他需要使用提示框的组件中引入并使用：

<template>
  <div>
    <button @click="addProductToCart">添加到购物车</button>
    <Toast ref="toast"></Toast>
  </div>
</template>

import Toast from './Toast.vue';
export default {
  components: {
    Toast
  },
  methods: {
    addProductToCart() {
      // 添加到购物车逻辑
      this.$refs.toast.showToast('商品添加到购物车成功');
    }
  }
};

在 style 部分定义提示框样式：

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z - index: 1000;
}

通过 teleport to="body" 将提示框渲染到 body 下，确保提示框在全局位置显示且不受其他组件布局干扰。

星途面试题库

面试题：Vue Teleport中等难度应用场景题

知识考点

面试题答案

场景一：模态框（Modal）