This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

Vue has always encouraged us to build uIs by encapsulating the UI and related behaviors into components. We can nest them inside another to build a tree that makes up the application UI.

However, sometimes a part of a component template logically belongs to that component, and from a technical point of view it is best to move that part of the template to a location outside of the Vue App in the DOM.

For example, some full-screen components such as modal boxes and full-screen loading….

What is a teleport

Teleport is a component that, as its name indicates, passes our component to the specified native DOM element (outside of the element bound to the Vue instance).

Usage scenarios

In the actual project development, we often encapsulate some common and reusable components, such as full-screen loading, modal box and other components. Some students here think that the display level (Z-index) of these components is higher than that of ordinary page components. That is, the components that are displayed at the top level.

In traditional development, we often put a loading component at the bottom of the page because of the style problem, and the code looks like this:

<template> <img alt="Vue logo" src="./assets/logo.png"/> <h3>teleport</h3> <! -- Loading component should be in here --> <! <loading/> </template>Copy the code
<div class="mask"> <div class="loading"> <! < div style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: inherit;"Copy the code
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(215.215.215.5);
  position: absolute;
  inset: 0;
  z-index: 888;
  .loading {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px; /* Half the height */
    margin-left: -50px; /* Half the width */
    z-index: 999; }}Copy the code

We put a Loading component in the template to simulate the current processing of some events. While it is normal to use the loading component on this template structure, let’s look at the rendered DOM structure.

From the figure, it can be seen that this loading component is nested in app components. It is ok to see that only one layer is nested, but this is just a simple page. However, when the page structure is complex, deep nesting will occur in this loading. This loading component is referenced by a div that is positioned relative to its parent, when the parent is set to position: relative; The loading component will not display properly as shown in the figure above.

Let’s try putting a position: relative; Div attribute.

<template> <img alt="Vue logo" src="./assets/logo.png"/> <h3>teleport</h3> <div style="position: relative;" > <loading/> </div> </template>Copy the code

The loading component is now positioned according to the parent element, since the parent element sets position: relative; Property, which causes it not to be full screen to display loading effects. So how to solve this problem?

The Teleport component is designed to solve this problem, so retrofit our loading component:

<teleport to="body"> <div class="mask"> <div class="loading"> <! </div> </div> </teleport>Copy the code

The to property in the Teleport component, which tells the teleport component where the DOM element should be rendered

Wrap the contents of the Loading component with a teleport tag and fill in a to property, passing the package’s HTML under the Body tag. In this way, our loading is transferred to the body tag, and there will be no display exception caused by the original parent div.

conclusion

Using loading component combined with teleport component can transfer our loading to the specified location, which conforms to our normal thinking logic and improves the reusability of loading component. That is, multiple loading components can be customized on a page to display different effects.

Reference:

V3.cn.vuejs.org/guide/telep…

V3.cn.vuejs.org/api/built-i…