Using elementui's Dialog pop-up box in vue, how do components edit and create a new pop-up box?

Dialog, should be written in each component, and a component should be written for each function addition, editing, etc. Can you reuse a Dialog pop-up box for all components?

Apr.01,2021

Yes, just the configuration data. Approximately, before each pop-up box is displayed, set the current dialog configuration data
pseudo code:

const DialogConfig = {
  curDialog: null,
  dialog1: {
    title: 'dialog1',
    message: '',
  },
  dialog2: {
    title: 'dialog1',
    message: '',
  },
};

methods: {
    hancleClick(name){
        DialogConfig.curDialog = DialogConfig[name]
    }
}

first, you can handle this kind of event in the component
the second, add, edit the pop-up window to write the component


I usually set a variable to load id, and then click to edit, this variable is not 0, and render when the pop-up window determines that id is not 0.


is not very familiar with the pop-up window of elementUI, but I have encountered similar problems with iview development before, which should be similar. I use iview's Modal component to encapsulate a reusable pop-up component, the idea is to use vue-router , need to configure router.js , use routing to jump to the pop-up window, the content in the pop-up window can be diy, according to the passed component name (passed in the query) to determine the actual content components displayed in the pop-up component.


the existing solution is to pass parameters through props and be judged by if, such as

<my-dialog :is-edit="true",:edit-data="{name:''}"/>
Menu