鸿蒙手势密码

手势密码可通过 PatternLock组件实现

TypeScript 复制代码
PatternLock()
  .sideLength(320)// 宽高
  .circleRadius(12)// 圆点半径
  .pathStrokeWidth(10)// 线宽度
  .regularColor('#ffd9d9d9')// 未选中圆点色
  .activeColor('#800a59f7')// 经过圆点色
  .selectedColor('#ff0a59f7')// 选中圆点色
  .pathColor('#cc0a59f7')// 线颜色
  .onDotConnect(() => {
    // 密码输入选中宫格圆点时触发该回调
  })
  .onPatternComplete((input: number[]) => {
    // 密码输入结束时触发该回调
  })

手势校验基础

TypeScript 复制代码
// 手势组件控制器
private patternLockController: PatternLockController = new PatternLockController()

setErrorMessage(message: string) {
  this.errorMessage = message
  this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)
}

clearErrorMessage() {
  this.errorMessage = ''
  this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)
}

// 重置图形密码和临时密码
resetPattern() {
  // 每次输入结束后,自动清空界面图形
  this.timeoutID = setTimeout(() => {
    // 重置图形密码
    this.patternLockController.reset()
    // 重置临时密码
    this.inputPassword = []
  }, 1000)
}

// 手势密码输入完成
onPatternComplete(input: number[]) {
  // 保存临时密码
  this.inputPassword = input
  // 1. 校验长度,输入长度小于 4,提示重新输入
  if (this.inputPassword.length < 4) {
    // 设置错误提示
    this.setErrorMessage('手势密码长度不能小于4位,请重新输入')
  } else {
    // 清空错误提示
    this.clearErrorMessage()
    // 2. 长度符合规范,同时判断是否为首次输入
    if (this.firstPassword.length === 0) {
      // 2.1 首次输入,直接保存当前输入的密码
      this.firstPassword = input
    } else {
      // 2.2 非首次输入,需判断两次输入的密码是否相同
      
    }
  }
  // 每次输入结束后,自动清空界面图形
  this.resetPattern()
}

build(){
  PatternLock(this.patternLockController)
  .sideLength(320)// 宽高
  .circleRadius(12)// 圆点半径
  .pathStrokeWidth(10)// 线宽度
  .regularColor('#d9d9d9')// 未选中圆点色
  .activeColor('#800a59f7')// 经过圆点色
  .selectedColor(this.errorMessage && this.inputPassword.length !== 0 ? '#ffff5e5d' : '#ff0a59f7')// 选中圆点色
  .pathColor(this.errorMessage && this.inputPassword.length !== 0 ? '#ccff5e5d' : '#cc0a59f7')// 线颜色
  .onDotConnect(() => {
    // 密码输入选中宫格圆点时触发该回调
    clearTimeout(this.timeoutID)
  })
  .onPatternComplete((input: number[]) => {
    this.onPatternComplete(input)
  })
}
相关推荐
你真的可爱呀几秒前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
Jeffrey__Lin1 分钟前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
咖啡の猫3 分钟前
Vue-MVVM 模型
前端·javascript·vue.js
xvmingjiang4 分钟前
Element Plus el-table 默认勾选行的方法
前端·javascript·vue.js
野生yumeko1 小时前
伪静态WordPress/Vue
前端·javascript·vue.js
爱因斯坦乐1 小时前
【vue】I18N国际化管理系统
前端·javascript·vue.js·笔记·前端框架
一只游鱼1 小时前
vue集成dplayer
前端·javascript·vue.js·播放器·dplayer
kyle~8 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light608 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏9 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui