添加编辑弹框表单组件封装及途中遇到的问题

描述：项目中我们经常会遇到，添加和编辑的时候使用弹窗，为了简便有时候我们会直接使用连个弹窗，其实这种做法是不好的，为了解决这个问题我打算封装一个弹窗实现添加和编辑共用。

好了开始写bug了：
myDialog.vue

<template>
  <div>
    <el-dialog
      :visible="dialogConfig.status"
      :title="dialogConfig.title"
      :width="dialogConfig.width"
      @close="closeDialog" //触发关闭时的会掉
      @closed="closedDialog" // 关闭动画结束时的回调
    >
   <-- 弹框主体内容插槽-->
      <slot name="content" />
   <-- 弹框footer按钮插槽-->
      <template slot="footer">
        <span v-if="$slots.footer">
          <slot name="footer" />
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "myDialog",
  data() {
    return {
      dialogConfig: {
        status: false,
        title: "",
        width: "951.5px",
      },
    };
  },
  methods: {
    closeDialog() {
      this.$emit("close");
    },
    closedDialog() {
      this.$emit("closed");
      console.log(this.dialogConfig.width);
    },
    // 修改弹框配置，打开关闭、标题、宽度等
    modifyDialogConfig({ status, title, width } = this.dialogConfig) {
      this.dialogConfig.status = status;
      this.dialogConfig.title = title;
      this.dialogConfig.width = width;
    },
  },
};
</script>

使用：
index.vue

<template>
  <div>
    <el-button type="primary" @click="openDialog('add')">添加</el-button>
    <el-button type="primary" @click="openDialog('edit')">编辑</el-button>
    <dia-log ref="myDialog" @close="closeDialog" @closed="closedDialog">
      <template slot="content">
        <el-form
          :model="formData"
          :rules="rules"
          ref="myForm"
          label-width="100px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input placeholder="请输入用户名" v-model="formData.username" />
          </el-form-item>
          <el-form-item label="电话号码" prop="phonenumber">
            <el-input
              placeholder="请输入电话号码"
              v-model="formData.phonenumber"
            />
          </el-form-item>
        </el-form>
      </template>

      <template slot="footer">
        <el-button type="primary" size="mini">提交</el-button>
        <el-button size="mini">重置</el-button>
        <el-button size="mini" @click="closeDialog">取消</el-button>
      </template>
    </dia-log>
  </div>
</template>

<script>
import diaLog from "../components/myDialog";
export default {
  components: {
    diaLog,
  },
  data() {
    return {
      formData: {
        username: "",
        phonenumber: "",
      },
      rules: {
        username: [{ required: true, trigger: "blur" }],
        phonenumber: [{ required: true, trigger: "blur" }],
      },
    };
  },
  methods: {
    openDialog(type) {
      const title = type === "add" ? "添加" : "编辑";
      if (type === "edit") {
        this.formData = {
          username: "123",
          phonenumber: "456",
        };
      }
      this.$refs.myDialog.modifyDialogConfig({
        title,
        status: true,
        width: "951.5px",
      });
    },
    closeDialog() {
      this.$refs.myDialog.modifyDialogConfig({ status: false });
    },
    closedDialog() {
      this.formData = this.$options.data().formData;
      this.$refs.myForm.resetFields();
    },
  },
};
</script>

封装时遇到的问题

• el-form 中el-form-item的label标签没和输入框同行显示都各自独占一行
  解决方法：没有指定label的宽度加上label-width

 <el-form
          :model="formData"
          :rules="rules"
          ref="myForm"
          label-width="100px"
        >

• 弹框的footer插槽未生效
  bug写法：<span v-if="$slots.footer"> <slot name="footer" /> </span>
  正确写法：

<template slot="footer">
        <span v-if="$slots.footer">
          <slot name="footer" />
        </span>
</template>