vue3-组合式api-teleport

teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去，最常见的例子就是模态框。

 

<template>

  <div>

    <!-- 弹窗 -->

    <myModal></myModal>

  </div>

</template>

<script>

import myModal from "./myModal.vue";

export default {

  components: {

    myModal,

  },

  setup() {

    return {};

  },

};

</script>

 

myModal组件

<template>

  <div>

    <button @click="modalOpen = true">弹出一个模态窗口</button>

    <!-- Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态,

        to="body" 挂载到body标签下-->

    <teleport to="body">

      <div v-if="modalOpen" class="modal">

        <h3>这是一个弹窗，我的父元素是body</h3>

        <button @click="modalOpen = false">关闭</button>

      </div>

    </teleport>

  </div>

</template>

<script>

import { ref } from "vue";

export default {

  setup() {

    const modalOpen = ref(false);

    return {

      modalOpen,

    };

  },

};

</script>

<style scoped>

.modal {

  position: fixed;

  top: 20%;

  left: 20%;

  height: 200px;

  width: 400px;

  background-color: pink;

}

</style>

 

运行项目界面效果如下

点击弹出一个模态窗口按钮，弹窗会显示

 

出　　处：https://www.cnblogs.com/xiao-wo-niu/
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。