使用elementUI配合vue2实现密码修改功能

在目前的vue开发中，考虑到开发效率，框架的使用必不可少，优秀的框架不仅能提供丰富的api，提升界面的渲染性能，而且与vue的耦合度很高。elementUI是一款优秀的UI框架，深受开发者信赖。接下来，我将用这个UI框架实现一个常见的密码修改功能。 首先我们上界面效果：

首先我们将需求具体拆分下：

• 用elementUI框架编写出基本的界面结构
• 给界面的结构添加prop/model/rules/ref等属性
• 点击“确认密码”按钮后，对表单里面的数据进行校验
• 校验通过后，将表单信息按照接口文档的要求传递过去
• 密码修改成功

接下来，我们来实现以上需求：

1、界面结构代码

<el-dialog
  title="修改密码"
  :visible.sync="dialogVisible"
  width="500px"
  @close="closeDialog"
>
  <el-form ref="form" label-width="120px" :model="form" :rules="rules">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input v-model="form.oldPassword" show-password size="small" placeholder="请输入旧密码" />
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="form.newPassword" show-password size="small" placeholder="请输入新密码" />
    </el-form-item>
    <el-form-item label="重置密码" prop="reviewPass">
      <el-input v-model="form.reviewPass" show-password size="small" placeholder="重置密码" />
    </el-form-item>
    <el-form-item>
      <el-button size="mini" type="primary" @click="surePass">确认密码</el-button>
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

上面就是用elementUI编写的界面代码：解释下上面的一些属性：

• ref：用来获取el-form的组件实例，这个在表单验证和重置表单的时候用到。
• rules：用来设置表单元素的校验规则。
• model：el-form 用来挂载数据的一个对象。
• prop：这个属性很重要，他在表单校验的时候用到，而且el-from-item 的 prop 属性必须与 el-input 中需要校验的表单属性一致。
• v-model:用来绑定输入框的数据，在表单校验时通过它来获取每个输入框的值。
• show-password：因为都是密码输入框，所以我们需要这个属性达到密码输入框的状态效果。

2、在vue的data里面定义对应的表单变量，里面的form对应的是model绑定的form，而里面的值因为考虑到要提交到后端，所以最好与文档参数值保持一致。

data(){
    return{
        form： {
            oldPassword: '',
            newPassword: '',
            reviewPass: ''
        },
        rules: {
            oldPassword: [
              { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
              { min: 6, max: 12, message: '密码小大于6位小于12位', trigger: ['blur', 'change'] }
            ],
            newPassword: [
              { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
              { min: 6, max: 12, message: '密码小大于6位小于12位', trigger: ['blur', 'change'] }
            ],
            reviewPass: [
              { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
              { validator: (rules, value, callback) => {
                if (value === this.form.newPassword) {
                  callback()
                } else {
                  callback(new Error('重复密码需要与新密码保持一致！'))
                }
              }
              }
            ]
          }
    }
}

3、在点击按钮后，我们通过elementUI提供的validate方法配合ref以及rules规则对表单的值进行校验

    async surePass() {
        await this.$refs.form.validate() //此处使用await可以判断校验是否通过，若通过，则继续执行下面的代码
        await updatePass(this.form)  //updatePass是封装的调用后端接口的一个方法，里面的this.form是表单里面的值
        this.closeDialog()  //因为在点击弹出的关闭按钮和点击取消按钮的时候也需要实现这两个功能，所以封装了一个关闭弹窗以及重置表单的方法，
    },
    closeDialog(){
      this.$refs.form.resetFields()  // resetFields()是elementUI提供的一个重置表单内容的方法。
      this.dialogVisible = false
    }
    

4、在校验表单数据的时候，因为这里的重复密码输入框需要判断与新密码是否相等这个需求，这里需要用到自定义的校验规则validator,他里面包含三个参数：rules(定义的校验规则)、value（这个是和输入框双向绑定的属性）以及callback回调函数。

5、表单校验成功后，给用户一个修改成功的提示，并关闭弹窗

至此，一个使用vue配合elementUI框架的简单的密码修改功能已经实现。因本人处于学习阶段，难免存在错误之处，还望各位大佬指点。