Vue3 Example of implementing dual-box positioning Overlay

In Vue 3, use<Teleport>It can elegantly render a component to a node outside the root node, while making the rendered content not lose its responsiveness and corresponding lifecycle function calls. Then based on this, use<Teleport>Implement Overlay relative to a certain element. In fact, this article has little to do with Vue3, and it only explains a type of Overlay design method through Vue3.

principle

To implement Overlay relative to a certain element, two elements need to be relied on, Origin and Panel, Origin represents the relative elements, and Panel represents the Overlay itself. There are two main implementation methods.

Text flow positioning method, based on the absolute and relative characteristics of position, makes the Panel position relative to Origin position.
Overlay uses Origin to make a fixed offset dual-box positioning method, which is the method that needs to be explained in this article.
Implementation First, by<Teleport>, can establish a top-level Overlay, that is, create a new node in the root node.

setup(_, ctx) {
 const originRef = ref<HTMLElement>();
 const panelRef = ref<HTMLElement>();
 const panelStyle = ref<CSSProperties>({ position: 'absolute' });
 // ...
 return () => (
  <>
   <div ref={originRef}>origin</div>

   <Teleport to="#cdk-overlay-anchor">
     <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, height: '100vh', width: '100vw' pointerEvents: 'none'}}>
      <div ref={panelRef} style={}>
       <div style={{height: '100px', width: '100px' border: '1px solid black'}} />
      </div>
     </div>
   </Teleport>
  </>
 );
}

After getting the dom ref of these two, you need to calculate the size and position of the Origin box in real time to obtain the relative offset of the Panel. In Vue, elements can only be obtained after being mounted, so specific elements can be obtained through composition-api's onMouted. Then calculate it in the life cycle.

Calculate the relative positions of two boxes

How to calculate the size and position of the Origin and get its changed listening. The size and position of Origin are obtained through the getBoundingClientRect API, which can start calculating the relative position of Overlay. Suppose we want to put Overlay directly below Origin, the calculation function should be like this.

const panelStyle = ref&lt;CSSProperties&gt;({ position: 'absolute' });

onMounted(() =&gt; {
 const origin = ;
 const panel = ;
 if (!origin || !panel) {
  return ;
 }

 const calculate = () =&gt; {
  const rect = ();
  // Origin is just below the center of the bottom edge of the origin element  const originX =  + ( / 2);
  const originY = ;

  // The coordinates of the panel are offset to the origin  const panelRect = ();
  const panelX = originX -  / 2;
  const panelY = originY;

  // Set panel data to trigger node changes   = `${panelX}px`;
   = `${panelY}px`;
 };
});

Of course, you can also calculate the Panel coordinates in different directions (such as, right left, right upper, right lower, etc.) and arrange and combine them. There are 27 different situations in total (each point depends on two variables X and Y; each variable has three different situations, left, middle, right, or upper, middle, and lower).

Listen to changes in the box

Here, we will use the browser's own API to listen to them. Through MutationObserver and ResizeObserver, you can easily listen for changes in size and position of Origin and Panels.

First, listen for the size and position changes of Origin. Here we use MutationObserver. Because the reason for the position changes can only be style, so you only need to listen for the change of style.

const origin$ = new MutationObserver(calculate);
origin$.observe(origin, {
 // Just get the change in the attribute style attributeFilter: ['style'],
});

Panel only needs to listen for changes in size. There is a more perfect API for changes in size, ResizeObserver.

const panel$ = new ResizeObserver(calculate);
panel$.observe(panel);

Then, you need to cancel the listening before the dom is destroyed.

// Cancel the monitoring before dom is destroyedonBeforeUnmount(() =&gt; {
 origin$.disconnect();
 panel$.disconnect();
});

Listen to window events

In order to get changes correctly, we need to listen to two events: resize and scroll.

// In order to be able to calculate before the scroll event is captured, child elements with scroll bars will also trigger the calculation.('scroll', calculate, true);
('resize', calculate);
at last，Events must still be canceled before destruction。

// Cancel the monitoring before dom is destroyedonBeforeUnmount(() =&gt; {
 ('scroll', calculate, true);
 ('resize', calculate);
});

So far, the design of Overlay with the basic dual-box positioning method has been completed.

summary

Overlay built through dual-box positioning can effectively avoid a series of related problems such as zindex caused by CSS. It only takes calculating the relative offset between boxes to allow the Panel to attach to Origin. In this way, it will be very useful when implementing functions such as pull-down or Tooltip. At the same time, attach aSimple example, hope it can bring some inspiration.

The above is the detailed content of the example of Vue3 implementing dual-box positioning Overlay. For more information about vue3 implementing Overlay, please follow my other related articles!