Vue main.js引入全局changePassword组件原型实例，修改密码组件原型实例
<template>
<el-dialog title="修改密码" :visible.sync="visible" :show-close="false" :modal="true" :close-on-click-modal="false" :close-on-press-escape="false" width="500px">
<div class="dialog-box">
<!-- 表单 -->
<el-form :rules="rules" ref="passwordInfo" :model="passwordInfo" label-width="80px">
<el-form-item label="原密码" prop="oldPassword">
<el-input v-model="passwordInfo.oldPassword" show-password placeholder="原密码"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="passwordInfo.newPassword" show-password placeholder="新密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="newTwoPassword">
<el-input v-model="passwordInfo.newTwoPassword" show-password placeholder="确认密码"></el-input>
</el-form-item>
</el-form>
</div>
<template #footer>
<el-button @click.stop="cancelModal('passwordInfo')">关闭</el-button>
<el-button type="primary" @click="holdPassword('passwordInfo')">修改</el-button>
</template>
</el-dialog>
</template>
<script>
import { user_changePassword } from '@/common/js/api'
export default {
name: "changePassword",
props: {},
data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.passwordInfo.newPassword) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return {
visible: false,
passwordInfo: {
oldPassword: '',
newPassword: '',
newTwoPassword: '',
},
rules: {
oldPassword: [
{ required: true, message: '不能为空', trigger: ['blur', 'change'] }
],
newPassword: [
{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },
{
pattern: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/,
message: '密码为数字、英文、字符中的两种以上，长度 6 - 20位'
}
],
newTwoPassword: [
{ required: true, validator: validatePass2, trigger: 'blur' }
]
},
}
},
methods: {
// 修改密码-保存新密码
holdPassword(refForm) {
this.$refs[refForm].validate((valid) => {
if (valid) {
var param = {
uId: this.sideBarKey,
oldPassword: this.$md5(this.passwordInfo.oldPassword),
newPassword: this.$md5(this.passwordInfo.newPassword),
}
user_changePassword(param).then(res => {
this.cancelModal(refForm)
})
} else {
this.$message.warning('请按照提示把必填项补充完整')
return false
}
})
},
// 关闭弹窗
cancelModal(refForm) {
this.visible = false
this.$refs[refForm].resetFields()
},
},
}
</script>