SoFunction
Updated on 2025-04-04

Detailed explanation of vue3+ElementPlus encapsulated functional pop-up component

Requirement scenario: The pop-up component needs to support customized slot content, and the deleted pop-up window must also use this component, but the style is different. I hope that when the parent component uses the delete pop-up window, you can directly call a method to display the pop-up window.

Component simulation cuDialog

Suppose my popup component has the following props and events

  • dialogVisible: control pop-up window display and hide
  • title: pop-up window title
  • showClose: Whether to delete pop-up window
  • handleClose: event cancelled by pop-up window
  • handleConfirm: event determined by pop-up window

Create a new js file

You need to use vue3 herecreateApp, method implementation function component call

1. Import the required pop-up components

import CuDialog from '@/components/'

2. Create two global variables (name freely), one is to store the components created by createApp, and the other is to put the components dom

let app = null; let div = null;

3. Define two methods, one is to show pop-up windows and the other is to hide pop-up windows

I'm putting two methods in one object to facilitate page calls. You can freely design according to your preferences

const delMsg = {
  show:function() {},
  hide:function() {}
}

4. Start writing method to display pop-up windows

First, you need to confirm the parameters that the show method wants to receive. The parameters are those listed above, three props and two events.

function show(props) {
  const { title = 'Kind tips', delContent = 'Are you sure you want to delete the selected record?  ', confirm, close } = props;
    // Create dom and insert it into body  div = ('div');
  ('id', 'cu-dialog-id');
  (div);
  // Create components  app = createApp(CuDialog, {
    title, // Pop-up window title    delContent, // Delete the content of the pop-up window    dialogVisible: true, // Pop-up windows show or hide    showClose: true, // Whether to delete pop-up window    // Cancel event exposed by pop-up component handleClose    onHandleClose: () => {
      close && close();
      ('Cancel event within trigger function');
      ();
      ();
    },
    // Cancel event exposed by pop-up component handleConfirm    onHandleConfirm: () => {
      confirm && confirm();
      ('Trigger confirmation event within the function');
    }
  });
   (div);
}

5. Method of hiding pop-up windows

function hide() {
  ();
  ();
}

6. Export method

export default delMsg;

How to use

import delMsg from '@utils/'
({title:'Popt-up title',delContent:'The content of the pop-up window',confirm:() =>{
  ('Confirm event triggered');
  ();
},close:() => {
  ('Cancel event triggers')
}})

Complete code

import CuDialog from '@/components/';
let app = null;
let div = null;
const delMsg = {
  /**
    * @param {Object} props
    * @param {String} title The title of the pop-up window, no default 'warm reminder'
    * @param {String} delContent The content of the pop-up window is not passed by default. 'Are you sure you want to delete the selected record?  '
    * @param {Boolean} autoClose Whether canceling events requires special processing, setting false requires manually calling hide method, and no default true is passed
    * @param {Function} confirm pop-up window confirmation event
    * @param {Function} close pop-up window close event
    */
  show: function (props) {
    const { title = 'Kind tips', delContent = 'Are you sure you want to delete the selected record?  ', autoClose = true, confirm, close } = props;
    div = ('div');
    ('id', 'cu-dialog-id');
    (div);
    // eslint-disable-next-line vue/one-component-per-file
    app = createApp(CuDialog, {
      title,
      delContent,
      dialogVisible: true,
      showClose: true,
      onHandleClose: () => {
        close && close();
        ('Cancel event within trigger function');
        // If you need to close by default, no logical processing is done, please set autoClose to true (the default is true)        if (autoClose) {
          ();
          ();
        }
      },
      onHandleConfirm: () => {
        confirm && confirm();
        ('Trigger confirmation event within the function');
      }
    });
    (div);
  },
  hide: function () {
    ();
    ();
  }
};
export default delMsg;

This is the end of this article about the detailed explanation of vue3+ElementPlus encapsulated functional pop-up component. For more related contents of vue ElementPlus pop-up component, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!