鸿蒙手势密码

手势密码可通过 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)
  })
}
相关推荐
天天扭码28 分钟前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪30 分钟前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&30 分钟前
css word
前端·css
Мартин.33 分钟前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜33 分钟前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey1 小时前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus
小小小小宇1 小时前
PC和WebView白屏检测
前端
天天扭码1 小时前
ES6 Symbol 超详细教程:为什么它是避免对象属性冲突的终极方案?
前端·javascript·面试
小矮马1 小时前
React-组件和props
前端·javascript·react.js