游戏源代码交易平台_如何创建一个公众号_数字营销网站_今天全国疫情最新消息

---

main.js引入全局组件原型实例

changePassword 实例

1. changePassword.vue

<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 = falsethis.$refs[refForm].resetFields()},},
}
</script>

2. proto.js

import changePasswordVue from './changePassword.vue'
export default {install: (Vue) => {// ------------------ changePassword 修改密码弹窗 ------------------const PasswordComponent = Vue.extend(changePasswordVue);const newPasswordCom = new PasswordComponent();const tp2 = newPasswordCom.$mount().$el;document.body.appendChild(tp2);Vue.prototype.$showchangePassword = () => {newPasswordCom.visible = true}Vue.prototype.$hidechangePassword = () => {newPasswordCom.visible = false}}
}

引入及使用

main.js

// 全局组件原型实例
import publicProto from '@/common/js/proto.js'
Vue.use(publicProto)

login.js

this.$showchangePassword()

---