Use vue3 to encapsulate a simple and practical pop-up layer

Preface

In normal development, the pop-up layer is considered the most commonly used component, especially the form pages, details pages, and various confirmations on the user side are very suitable for using the pop-up layer component display, but the general component library provides us with the general form of components or a simple service.

In my opinion, the component-like pop-up layer should be provided by the component library for secondary packaging. If it is directly, it is actually very intuitive.

Write it in the page structure, but it is not displayed in the page structure. It is not suitable for the position to be placed at the bottom.
If there is only one pop-up layer on a page, it is easy to maintain. Not to mention the number of more pages, it is a big deal to maintain the display of hidden variables on the pop-up layer.
If the display in the middle of the pop-up layer is a form or a page with heavy business, the logic will be mixed with the page and it is difficult to maintain. If it is separated into components, it is too troublesome to extract components when all forms are all in the background.

So is there a more way to use pop-up windows that fit the mind? Hehe, there is really, that is, the service creation pop-up layer

Service-style pop-up layer

etc! If it is a service creation pop-up layer, each UI component library is basically provided, why do you still need to encapsulate it? Because the services provided by the component library are generally used for simple confirmation pop-ups, if it is a heavier form pop-up, it is difficult to create the services provided by the component library.ant-design-vueTake a look at the modal as an example.

<template> 
    <a-button @click="showConfirm">Confirm</a-button>
</template>
<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode, defineComponent } from 'vue';
import { Modal } from 'ant-design-vue';

export default defineComponent({ 
    setup() {
     const showConfirm = () => { 
       ({ 
          title: 'Do you want to delete these items?',
          icon: createVNode(ExclamationCircleOutlined),
          content: 'When clicked the OK button, this dialog will be closed after 1 second', 
          onOk() { 
            return new Promise((resolve, reject) => { 
              setTimeout(() > 0.5 ? resolve : reject, 1000); 
             }).catch(() => ('Oops errors!')); }, 
              // eslint-disable-next-line @typescript-eslint/no-empty-function 
          onCancel() {},
        });
       }; 
     return { showConfirm, };
     },
    }); 
</script>

You can see that modal provides propertiescontent, In the document, we can see that its type can be transmitted to vue components, but writing like this has disadvantages and we cannotcontentThe component in the component closes the modal. If you want to close the Modal in the child component, you need to pass the Modal itself to the child component and then trigger thedestroy();。

Obviously, when modal is a form and business-heavy component, it is difficult to support our work. First, it is impossible to simply and directly close the pop-up layer in the subcomponent, and second,contentIt is also more troublesome to pass values to the parent component.

Create with Promise!

usepromiseTo create, we trigger resolve when close, and we can also pass the value by resolving to trigger then, which is very logical and semantic.
Without further ado, weelement-plusofdialogAs an example, let's see how to use itPromiseEncapsulate the ejection layer.

// 
import {
  createApp,
  createVNode,
  defineComponent,
  h,
  ref,
  onUnmounted,
} from "vue";

import { ElDialog } from "element-plus";

import type { App, Component, ComputedOptions, MethodOptions } from "vue";
//Introduce the dialog typeimport type { DialogProps } from "element-plus";

export type OverlayType = {
  component: Component&lt;any, any, any, ComputedOptions, MethodOptions&gt;;
  options?: Partial&lt;DialogProps&gt;;
  params?: any;
};

export class OverlayService {
  // Overlay vue instance  private OverlayInstance!: App;
  
  // Components of the ui library generally have animation effects, so a boolean value needs to be maintained to display and hide  public show = ref&lt;boolean&gt;(false);

  // Component library options  private options: Partial&lt;DialogProps&gt; = {};

  //Parameters passed to child components in open  private params: any = {};

  //mounted dom  public overlayElement!: Element | null;

  //Subcomponent  private childrenComponent!: Component&lt;
    any,
    any,
    any,
    ComputedOptions,
    MethodOptions
  &gt;;

  //The resolve triggered by close is first created and assigned by open  private _resolve: (value?: unknown) =&gt; void = () =&gt; {};

  private _reject: (reason?: any) =&gt; void = () =&gt; {};

  constructor() {
     = ("div");
    ();
    onUnmounted(() =&gt; {
      //Uninstall overlay vue instance when leaving the page      ?.unmount();
      if (?.parentNode) {
        ();
      }
       = null;
    });
  }
 
  private createdOverlay() {
    const vm = defineComponent(() =&gt; {
      return () =&gt;
        h(
          ElDialog,
          {
            //Does the child components when the pop-up window is closed by default            destroyOnClose: true,
            ...,
            modelValue: ,
            onClose: (this),
          },
          {
            default: () =&gt;
              createVNode(, {
                close: (this),
                params: ,
              }),
          }
        );
    });
    if () {
       = createApp(vm);
      ();
    }
  }
  //The method to open pop-up window returns to promise  public open(overlay: OverlayType) {
    const { component, params, options } = overlay;
     = component;
     = params;
    if (options) {
       = options;
    }
    return new Promise((resolve, reject) =&gt; {
      this._resolve = resolve;
      this._reject = reject;
      //Judge whether there is an overlay instance      if (!) {
        ();
      }
       = true;
    });
  }

  //The method of closing pop-up window can be passed to trigger the promise next step of opening  public close(msg?: any) {
    if (!) return;
     = false;
    if (msg) {
      this._resolve(msg);
    } else {
      this._resolve();
    }
  }
}

//Create a hooks for good use in setupexport const useDialog = () =&gt; {
  const overlayService = new OverlayService();
  return {
    open: (overlayService),
    close: (overlayService),
  };
};

After encapsulating the dialog service, we now create a child component first. The child component passed to open will receive close and params two props.

&lt;!-- --&gt;
&lt;template&gt;
  &lt;div&gt;
   {{params}}
   
   &lt;button @click="close('Close pop-up window')" &gt;Close pop-up window&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script lang="ts" setup&gt;
const props = defineProps&lt;{
  close: (msg?: any) =&gt; void;
  params: any;
}&gt;();
&lt;/script&gt;

Then we use open on the page

&lt;template&gt;
  &lt;div&gt;
   &lt;button @click="openDemo" &gt;Open pop-up window&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script lang="ts" setup&gt;
import ChildDemo from './' 
import { useDialog } from "./useDialog";

const { open } = useDialog();

const openDemo = () =&gt; {
  open({
    component: ChildDemo,
    options: { title: "Popular demo" },
    params:{abc:'1'}
  }).then((msg)=&gt;{
    ('Close pop-up window trigger',msg)
  });
};
&lt;/script&gt;

Well, we have encapsulated a simple and practical pop-up service.

Written at the end

In fact, there is still a small problem with encapsulation like this, that is, you cannot get the vue instance, you can only get the instance of overlay. Because overlay is a recreated vue instance, do not use globally registered components and introduce them separately on the subcomponents.pinia,vuex,routerTheseparamsMake incoming child components.

If you don't want to encapsulate it yourself, you can use the library I wrotevdiUseOverlay hook is paired with any UI component library, and vdi also provides better dependency injection. If used with vdi's vueModule, there is no problem mentioned above

This is the end of this article about using vue3 to encapsulate a simple and practical pop-up layer. For more related content of vue3 to encapsulate pop-up layer, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!