element修改密码页面 包含 新密码，旧密码，确认密码

elementPlus写法

<template>
  <div class="container change-password">
    <el-card class="box-card">
      <div class="back-text">
        <el-link type="primary" :underline="false" @click="goBack"><el-icon><ArrowLeft /></el-icon>返回</el-link>
      </div>
      <el-form ref="ruleFormRef" :model="ruleFormData" status-icon :rules="rules" label-width="100px"
        class="change-pass-form">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="ruleFormData.oldPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input v-model="ruleFormData.pass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleFormData.checkPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleFormRef')">重置</el-button>
          <el-button type="primary" @click="submitForm('ruleFormRef')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>
<script setup>
import { computed, onMounted, ref, watch, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter()



const ruleFormRef = ref() // dom
const ruleFormData = ref({
  pass: '', // 密码
  checkPass: '', // 确认密码
  oldPass: '' // 旧密码
}) // 数据

const validateOldPass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入旧密码'))
  } else {
    callback()
  }
}
const validatePass = (rule, value, callback) => {
  if (value === '' || value.length < 6) {
    callback(new Error('请输入不少于6位的密码'))
  } else {
    if (ruleFormData.value.checkPass !== '') {
      ruleFormRef.value.validateField('checkPass')
    }
    callback()
  }
}
const validateCheckPass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleFormData.value.pass) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const rules = ref({
  oldPass: [
    { required: true,validator: validateOldPass, trigger: 'blur' }
  ],
  pass: [
    { required: true,validator: validatePass, trigger: 'blur' }
  ],
  checkPass: [
    { required: true, validator: validateCheckPass, trigger: 'blur' }
  ]
})

const goBack = ()=> {
  router.go(-1)
}
const submitForm = async (formEl)=> {
  // console.log(formEl,'formEl')
  // if (!formEl) return
  // await formEl.validate((valid) => { // 我这样写不对然后就改用了下面这种
  await ruleFormRef.value.validate((valid) => {
  console.log(valid,'valid')

    if (valid) {
      const data = {
        oldPassword: ruleFormData.value.oldPass,
        newPassword: ruleFormData.value.pass
      }
      ResetPassword(data).then(res => {//修改密码接口
        removeLoginID()//退出接口
        ElMessageBox.alert('密码已修改，将重新登录', '提示', { 
          confirmButtonText: '确定',
          showCancelButton: false,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          showClose: false,
          type: 'warning'
        }).then(action => {
          if (action === 'confirm') {
            router.replace('/login')
          }
        })
      })
    } else {
      return false
    }
  })
}
const resetForm = (formEl)=> {
  console.log(formEl,'formEl')
  if (!formEl) return
  formEl.resetFields()
}


</script>
<style>

</style>

在router/index,js 页面写上路由

<!-- 头像组件 -->
<template>
  <div class="demo-type">
    <el-dropdown>
      <span>
        <el-avatar> {{user}} </el-avatar>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          <el-dropdown-item divided @click.native="goEditPassword">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </template>
  </el-dropdown>
  </div>
</template>

<script setup>
import { getItem,setItem } from '@/utils/storage'
import { computed } from 'vue'
import { useRouter } from 'vue-router';
import { loginout } from '@/api/user'

const router = useRouter()

const user = computed(() => {
  const result = getItem('userInfo')
  console.log(result,'result')
  if(!result){
    router.push({path:'/login'})
    return
  }else if(result.length!=0 && result[0].name){
    return result[0].name || ''
  }
})
// 退出登录
const logout = async ()=> {
  setItem('userInfo',null)
  setItem('_userID',null)
  await loginout() // 删除cookiesToken
  router.push({path:'/login'})
}
const goEditPassword = async ()=> {
  router.push({path:'/userSetting/index'})
}
</script>

<style scoped>
.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>

elementui写法

<template>
  <div class="container change-password">
    <el-card class="box-card">
      <div class="back-text">
        <el-link type="primary" :underline="false" @click="goBack"><i class="el-icon-arrow-left" />返回</el-link>
      </div>
      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="change-pass-form">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="ruleForm.oldPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>
<script>
  import { ResetPassword } from '@/api/user'
  import { removeLoginID } from '@/utils/auth'
  export default {
    name: 'ChangePassword',
    data() {
      var validateOldPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'))
        } else {
          callback()
        }
      }
      var validatePass = (rule, value, callback) => {
        if (value === '' || value.length < 6) {
          callback(new Error('请输入不少于6位的密码'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validateCheckPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          pass: '', // 密码
          checkPass: '', // 确认密码
          oldPass: '' // 旧密码
        },
        rules: {
          oldPass: [
            { validator: validateOldPass, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validateCheckPass, trigger: 'blur' }
          ]
        },
        input1: '',
        input2: '',
        input3: '',
        select: ''
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = {
              oldPassword: this.ruleForm.oldPass,
              newPassword: this.ruleForm.pass
            }
            ResetPassword(data).then(res => {
              removeLoginID()
              this.$confirm('密码已修改，将重新登录', '提示', {
                confirmButtonText: '确定',
                showCancelButton: false,
                closeOnClickModal: false,
                closeOnPressEscape: false,
                showClose: false,
                type: 'warning'
              }).then(action => {
                if (action === 'confirm') {
                  this.$router.replace('/login')
                }
              })
            })
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .box-card {
    width: 60%;
    margin: 0 auto;
  }

  .change-pass-form {
    padding: 30px 0;
  }

  .back-text {
    text-align: right;
    margin-bottom: 20px;
  }

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>