动态el-dialog弹窗，根据内容不同弹窗大小不同

需求：弹窗就写一次，样式和标题根据内容不同传参也不同，弹窗的样式也做了更改，之前本来是想做封装的，但是弹窗封装未免也太麻烦了，那不就违背初衷了嘛，本来就是想便利点，不用写多次

//把弹窗的内容拆出,变成父子传值的方式实现，有多个弹窗就用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>

data的内容

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

假如用户点击按钮显示弹窗，这样就可以打开弹窗了

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

细心的小伙伴应该发现弹窗没有确认和取消按钮吧，我这边是直接放在弹窗内容里面了，好做直接判断。取消就是关闭弹窗和清空表单操作了，根据自己实际情况来

</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;
    },

这样就实现了一个弹窗多内容，是不是很方便，如果有更好的方法，麻烦评论区告诉我谢谢~文章到此结束希望对你有所帮助~