Hjh-password NPM

说明

用户信息加修改密码组件支持 vue2,vue3

配置属性

字段	类型	默认值	描述
`isChangePassword`	`boolean`	`true`	是否显示修改密码
`isTelephone`	`boolean`	`true`	是否显示手机号
`isRole`	`boolean`	`true`	是否显示角色
`isUserName`	`boolean`	`true`	是否显示账号
`userInfo`	`object`	`{name: "name", phoneNum: "telephone", role: "role", acctName: "userName"}`	用户信息

配置方法

方法名	参数	返回类型	描述
`changePassword`	`val: any`	`void`	提交修改密码
`doFlag`	无	`void`	是否需要双因子认证
`verificationCode`	无	`void`	双因子认证短信验证
`setFlag`	`e: boolean`	`void`	控制是否展示双因子弹窗（通过 ref 调用）
`changeDialog`	`e: boolean`	`void`	点击提交修改密码成功后调用请传入参数 false（通过 ref 调用）

代码配置示例 :

<template>
  <hjh-password
    ref="hjhPassword"
    :userInfo="{
      name: '43534534',
      acctName: '111',
      phoneNum: '123',
      role: 'guanliy',
    }"
    @doFlag="test"
    @changePassword="change"
    @verificationCode="verificationCode"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import hjhPassword from "hjh-password"";
import "hjh-password/dist/style.css";
import {isEnableTwoFactorAuth,verifyCaptchaCode，modifyPassword} from '../src/api/index';

const hjhPassword=ref()
const captchaId=ref('')
const captchaKey=ref('')
const test=()=>{
  //验证是否需要双因子短信验证
  isEnableTwoFactorAuth().then(res=>{
    hjhPassword.value.setFlag(res.data.flag)
    captchaId.value=res.data.captchaId
  })
}

//不需要双因子认证这个函数不需要调用
const verificationCode=(e)=>{
  verifyCaptchaCode({captchaId:  captchaId.value,captchaCode:e}).then(res=>{
    if(res.data.captchaKey){
      //成功则关闭双因子短信验证弹窗
      hjhPassword.value.setFlag(false)
    }
})
}
const change = (data) => {
  modifyPassword({ oldPassword: data.oldPassword; newPassword: data.newPassword; captchaKey: captchaKey.value }).then(res=>{
    if(res===200){
hjhPassword.value.changeDialog(false)
    }
  })
};
</script>

接口需要三个地址：

是否开启双因子：
修改密码-短信验证：
修改密码：

vue-demi

1.0.0

10 months ago