持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

1.什么是对话框?

对话框是类似于alert的一个弹出框

和alert不同的是dialog对话框可以在里面嵌套更多的内容
如下图所示的表格,表单等

2.为什么要复用对话框?

任何关于为什么要复用的问题,都可以用减少代码量来回答.当然也便于维护

例如在一个录入信息的业务界面,往往有新增信息和修改信息两个功能按钮:

他们的弹出对话框分别显示如下:

我们惊讶的发现,这两个对话框高度类似,布局完全相同
这就给我们复用创造了条件,使用同一个对话框代码,减少重复代码的编写,也便于维护.

3.具体要怎么复用对话框?

接下来要复用对话框,首先我们要先看一下这两个对话框具体有哪些不同点:

1.标题不同: 标题内容不同
2.输入框内容不同:一个为空,一个要读取当前要修改的内容
3.确认按钮不同:按钮文字不同,实现的功能也不同

3.1数据处理

因为要复用,所以对话框的内容不能写死,所以需要使用变量数据作为标题,输入框内容和按钮内容:

数据data部分如下:

  // 1.数据
  data() {
    return {
      // 1.1分类列表
      list: [],
      // 1.2对话框显示的布尔值
      flag: false,
      // 1.3表单数据
      cateForm: {
        cate_name: "",
        cate_alias: "",
      },
      // 1.4表单校验

      cateFormRules: {
        cate_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          {
            pattern: /^\S{1,10}$/,
            message: "分类名必须是1-10位的非空字符",
            trigger: "blur",
          },
        ],
        cate_alias: [
          { required: true, message: "请输入分类别名", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: "分类别名必须是1-15位的字母数字",
            trigger: "blur",
          },
        ],
      },
      // 1.5 dialogtext
      dialogtext: {
        title: "新增分类",
        btn: "确认新增",
      },
    };
  },

html部分如下:

<!-- 弹出对话框 -->
    <el-dialog :visible.sync="flag" title="新增分类">
      <el-form
        label-position="right"
        label-width="80px"
        :model="cateForm"
        :rules="cateFormRules"
        ref="cateFormRef"
      >
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="cateForm.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="cateForm.cate_alias"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <template>
            <el-button type="info" plain @click="doReset">重置</el-button>
            <el-button type="primary" @click="doAdd">{{
              dialogtext.btn
            }}</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>

// 方法
  methods: {
    // 重置表单
    doReset() {
      this.$refs.cateFormRef.resetFields();
    },
    // 确认新增和确认修改
    doAdd() {
      // (1)判断表单验证是否通过
      this.$refs.cateFormRef.validate(async (valid) => {
        if (valid) {
          let promise = null;
          if (this.dialogtext.btn === "确认新增") {
            promise = this.$axios.post("/my/cate/add", this.cateForm);
          } else {
            promise = this.$axios.put("/my/cate/info", this.cateForm);
          }
          const { data: res } = await promise;
          if (res.code === 0) {
            this.$message.success(res.message);
            // 弹窗消失
            this.flag = false;
            // 刷新列表
            this.getCateList();
            // 清空表单
            this.cateForm.cate_name = "";
            this.cateForm.cate_alias = "";
          }
        }
      });
    },
    // 编辑分类
    doUpdate(row) {
      // (1)修改文本
      this.dialogtext = {
        title: "编辑分类",
        btn: "确认修改",
      };
      // 判断是新增还是编辑
      let promise = null;

      // (2设置内容
      this.cateForm = row;
      // (3)弹出对话框
      this.flag = true;
    },
  },
 
};

4.总结

4.1注意点

复用对话框的条件是两个对话框十分相似,不同的地方很少,如果不同的地方很多就不要复用了,不如再写一个,因为我们是为了少写代码才复用的,不要复用比再写一个代码量还大
对于文本部分的不同,我们不使用固定文本,而是使用绑定数据的方式来实现文字内容不同
对于同一个按钮,方法不同,我们可以通过判断按钮的文本内容是什么,来决定发出什么指令

4.2文章结构

本篇文章使用了,是什么,为什么,怎么办的逻辑三段论来回答标题内容
目的是是我自己养成这样的逻辑思维,避免老年痴呆

还在重复写对话框?本文教会你高效复用对话框(el-dialog实现)