Vue3.0学习 - 第十九节，vue3中如何使用 Teleport

小鱼儿 2022-10-09 12:08 45阅读 0赞

Vue3.x中的组件模板属于该组件，有时候我们想把模板的内容移动到当前组件之外的DOM 中，这个时候就可以使用 Teleport。

<teleport to="body">
    添加到body中 
    </teleport>
    <teleport to="#app">
    添加在app中
    </teleport>

## 使用Teleport实现一个模态对话框的组件 ##

创建一个组件 modelButton.vue

<template>
      <teleport to="body">
        <transition name="fade">
          <div class="model-bg" v-show="modelVisible" @click.self="$emit('closeModel')">
            <div class="model-content">
              <div class="model-header">
                <div class="model-title">{
       {modelTitle}}</div>
                <el-button @click="closeModel" type="text" icon="el-icon-circle-close" circle class="close-btn"></el-button>
              </div>
              <div class="model-body">
                <slot>
                  对话框
                </slot>
              </div>
            </div>
          </div>
        </transition>
      </teleport>
    
    </template>
    
    <script>
    export default {
      props: {
        modelVisible: {
          type: Boolean,
          default: false,
        },
        modelTitle: {
          type: String,
          default: "提示",
        },
      },
      emits: ["closeModel"],
      setup(props,{ emit  }) {
        let closeModel = () => {
          emit("closeModel");
        };
        return { closeModel };
      },
    };
    </script>
    
    <style lang="scss">
    .model-bg {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
    }
    .model-content {
      width: 600px;
      min-height: 300px;
      border: 1px solid #eee;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 6px;
      padding: 10px;
      box-sizing: border-box;
      z-index: 999;
      .model-header {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        .model-title {
          width: calc(100% - 40px);
          text-align: center;
          color: #000;
          font-size: 18px;
          font-weight: 700;
        }
        .close-btn {
          font-size: 22px;
          color: #666;
          &:hover {
            color: #000;
          }
        }
      }
      .model-body {
        width: 100%;
        height: calc(100% - 40px);
      }
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 1s ease;
    }
    
    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
    }
    </style>

在home.vue中使用

<template>
      <div class="home">
        <el-button type="primary" @click="modelShow = true">teleport</el-button>
        <modelButton :modelVisible="modelShow" modelTitle="我是一个teteport" @closeModel="modelShow = false">
          teleport
          <img alt="Vue logo" src="../assets/logo.png">
        </modelButton>
      </div>
    </template>
    
    <script>
    
    import modelButton from "@/components/teleportComp/modelButton.vue";
    import { reactive,toRefs } from '@vue/reactivity';
    
    export default {
      name: "Home",
      components: {
        modelButton,
      },
      setup() {
        const state = reactive({
          modelShow: false,
        });
    
        return {
          ...toRefs(state),
        };
      },
    };
    </script>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221005/a519a74026d34412b587dd9df9349b48.png