Vue main.js引入全局changePassword组件原型实例，修改密码组件原型实例

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 = false
      this.$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()