62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<template>
|
|
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="100px">
|
|
<el-form-item label="旧密码" prop="oldPassword">
|
|
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="newPassword">
|
|
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
|
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|
<el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" show-password />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submit">保存</el-button>
|
|
<el-button type="danger" @click="close">关闭</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const props = defineProps({
|
|
user: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const rules = ref({
|
|
oldPassword: [
|
|
{ required: true, message: "旧密码不能为空", trigger: "blur" }
|
|
],
|
|
newPassword: [
|
|
{ required: true, message: "新密码不能为空", trigger: "blur" },
|
|
{ min: 6, message: "新密码长度不能小于6位", trigger: "blur" }
|
|
],
|
|
confirmPassword: [
|
|
{ required: true, message: "确认密码不能为空", trigger: "blur" },
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (value !== props.user.newPassword) {
|
|
callback(new Error("两次输入的密码不一致"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: "blur"
|
|
}
|
|
]
|
|
})
|
|
|
|
const submit = () => {
|
|
// 模拟提交
|
|
ElMessage.success("修改成功")
|
|
}
|
|
|
|
const close = () => {
|
|
// 模拟关闭
|
|
ElMessage.info("已取消")
|
|
}
|
|
</script> |