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

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

  • [changePassword 实例](#changePassword 实例)
    • [1. changePassword.vue](#1. changePassword.vue)
    • [2. proto.js](#2. proto.js)
  • 引入及使用

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

changePassword 实例

1. changePassword.vue

javascript 复制代码
<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

javascript 复制代码
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

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

login.js

javascript 复制代码
this.$showchangePassword()

相关推荐
黑客飓风15 分钟前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
emojiwoo2 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
张人玉2 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧2 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang3 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip3 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
Orange3015113 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
lovepenny4 小时前
Failed to resolve entry for package "js-demo-tools". The package may have ......
前端·npm
超凌4 小时前
threejs 创建了10w条THREE.Line,销毁数据,等待了10秒
前端
车厘小团子4 小时前
🎨 前端多主题最佳实践:用 Less Map + generate-css 打造自动化主题系统
前端·架构·less