Dynamic el-dialog pop-up window, the size of the pop-up window varies according to the content

Requirements: Write the pop-up window once, the style and title are different according to the content, and the style of the pop-up window has also been changed. I originally wanted to package it before, but the pop-up window package is too troublesome, so it will be violated The original intention, I just wanted to make it more convenient, so I don’t need to write it many times

//把弹窗的内容拆出,变成父子传值的方式实现，有多个弹窗就用if来判断显示内容

 <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.dialogVisible"
      :width="dialog.width"
      :bodyStyle="{ padding: '0' }"
      @close="dialogClose"
    >
      <set-terminal
        v-if="terminal == 1"
        :flag="terminalFlag"
        :setTerminalForm="terminalForm"
        @closeClearFrom="closeDialog"
      ></set-terminal>
      <equipment-id
        v-else-if="terminal == 2"
        @closeClearFrom="closeDialog"
      ></equipment-id>
    </el-dialog>

content of data

 dialog: {
        title: "",
        width: "",
        dialogVisible: false
      },
      terminal: 1, //弹窗内容判断
      terminalFlag: 1,
      terminalForm: {}

If the user clicks the button to display the pop-up window, then the pop-up window can be opened

   //打开弹窗
 sensor(row) {
      this.terminal = 2;
      this.dialog.title = "标题内容";
      this.dialog.width = "450px";
      this.dialog.dialogVisible = true;
    },
   // 关闭弹窗
    dialogClose() {
      this.dialog.dialogVisible = false;
    },

Careful friends should find that there are no confirmation and cancel buttons in the pop-up window. I put it directly in the content of the pop-up window, so that I can make a direct judgment. Cancel is to close the pop-up window and clear the form, according to your actual situation

</el-form>
 <div class="save-data-div">
      <el-button @click="closeClearFrom('setMonitor')">取消</el-button>
      <el-button type="primary" @click="setTerminalForm">确定</el-button>
    </div>

.save-data-div{
    margin-top: 20px;
    button:nth-child(2){
        float: right;
    }
}

//子组件 内容 
closeClearFrom(val){
        this.$emit("closeClearFrom",val);
    },
//父组件内容
    closeDialog(val) {
      this.dialog.dialogVisible = false;
    },

In this way, a pop-up window with multiple contents is realized. Is it very convenient? If there is a better way, please tell me in the comment area. Thank you~ The article ends here and I hope it can be helpful to you~