鸿蒙手势密码

手势密码可通过 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)
  })
}
相关推荐
拾光拾趣录5 分钟前
Vue 双向数据绑定原理
前端·vue.js
前端小巷子11 分钟前
Webpack 5 新特性解析
前端·javascript·面试
90后的晨仔13 分钟前
vue中的watch 可以监听对象吗?
前端·vue.js
影子信息29 分钟前
vue3 组件生命周期,watch和computed
前端·javascript·vue.js
程序猿阿伟42 分钟前
《Angular+Spring Boot:ERP前端采购销售库存协同架构解析》
前端
90后的晨仔1 小时前
👂《侦听器(watch)》— 监听数据变化执行副作用逻辑
前端·vue.js
曾经的三心草1 小时前
微服务的编程测评系统6-管理员登录前端-前端路由优化
前端·微服务·状态模式
Point1 小时前
[LeetCode] 最长连续序列
前端·javascript·算法
rookiesx1 小时前
安装本地python文件到site-packages
开发语言·前端·python
支撑前端荣耀1 小时前
九、把异常当回事,代码才靠谱
前端