Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This paper has participated inProject DigginTo win the creative gift package and challenge the creative incentive money

About the Teleport

create by db on 2021-10-20 19:00:36

Recently revised in 2021-10-20 19:43:41

Idle time to have a tight mind, busy time to have leisure fun

directory

  • I. Introduction to Teleport
  • Ii. Usage scenarios and usage of Teleport
  • Iii. Brief introduction of the principle of Teleport
  • Reference documentation

I. Introduction to Teleport

Returns the directory

For Teleport, you can first see vue. Teleport

Teleport is a built-in addition to Vue3. As the name Teleport indicates, this component allows you to move elements from one place to another, primarily to move DOM elements within a template to another location.

Ii. Usage scenarios and usage of Teleport

Returns the directory

In the process of business development, we often encapsulate some common components, such as Modal components. I believe that when you use Modal components, you often encounter a problem, that is the positioning problem of Modal.

So without further ado, let’s just write a normal simple Modal component.

<! -- NomalModal.vue--> <template> <! -- Div. Container Popup components are displayed properly. Elements laid out with Fixed will normally be positioned relative to the screen window, but fixed will be positioned relative to the parent if the parent's Transform, perspective, or filter attribute is not None. <div class="modal__main"> <div class="modal__header"> <h3 class="modal__title"> <span class="modal__close">x</span> </div> <div class="modal__content"> normal pop-up text contents </div> <div class="modal__footer"> <button> Cancel </button> <button> Confirm </button> </div> </div> </template> <script> export default {setup() {return {}; }}; </script> <style lang="less"> .modal__mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; Background: Rgba (0, 0, 0, 0.3); } .modal__main { margin: 0 auto; margin-bottom: 5%; margin-top: 20%; width: 500px; background: #fff; border-radius: 8px; } .modal__header, .modal__footer, .modal__content { border-bottom: 1px solid #ccc; display: flex; justify-content: center; align-items: center; } .modal__content { height: 100px; } .modal__header, .modal__footer { height: 50px; } .modal__title { margin: 0; flex: 1; text-align: center; } .modal__close { flex: 0 0 20px; } </style>Copy the code

We then introduce the child component NomalModal in the parent component TeleportDemo.

<!-- TeleportDemo.vue -->
<template>
  <div class="container">
    <NomalModal />
  </div>
</template>

<script>
import NomalModal from '@/components/NomalModal.vue';
export default {
  components: {
    NomalModal
  },
  setup() {
    return {};
  }
};
</script>

<style lang="less">
.container {
  height: 80vh;
  overflow: hidden;
}
</style>
Copy the code

The rendered result looks like this:

From the figure above, we can see that the current popover component is displayed normally. The position of use: fixed; Layout elements are normally positioned relative to the screen window, normally with no problem. But if the parent element’s transform, perspective, or filter attribute is not None, the fixed element is positioned relative to the parent element.

So we just need to change the transform of the.container class, and the orientation of the popover component will be distorted.

<style lang="less">.container {
    height: 80vh;
    overflow: hidden;
    transform: translateZ(0);
}

</style>
Copy the code

The rendered result looks like this:

Obviously, there is a problem with the orientation of the popover component, so how should we solve it? Now the Teleport component comes in handy.

Teleport provides a clean way to control which parent node in the DOM renders HTML without having to resort to global state or split it into two components. — Vue official documentation

All we need to do is put the popover contents in
and set the to property to body, which means that the popover component will be a child of the body every time it renders. Very simple to use.

<template>
  <teleport to="body">

    <div class="modal__mask">
      <div class="modal__main">
        ...
      </div>
    </div>

  </teleport>
</template>
Copy the code

Principle of Teleport

Returns the directory

The principle of Teleport is simple: mount the child components of Teleport into the DOM element corresponding to the attribute to.

However, even if the child is rendered in a different place, it will still be a child of the parent and will receive name, prop from it. This also means that the injection from the parent will work properly. In Vue Devtools you will see the child nested beneath the parent, not where it will actually be moved.

With your mutual encouragement, for their own refueling!

Reference documentation

  • Teleport | vue.js
  • Practice and the principle of Vue3 Teleport component | segmentfault – Shenfq

Postscript: Hello friends, if you think this article is good, remember to give a thumbs-up or star, your thumbs-up and star is my motivation to write more and richer articles!Making the address

Document agreement

Db’s document library is licensed by DB under the Creative Commons Attribution – Non-commercial use – Share alike 4.0 International License. Based on works on github.com/danygitgit. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.