写了一个密码输入框【pc】

主要思路:

  • 使用 input 用于输入,宽高刚好等于六个密码框就行
  • 使用六个 div 用于展示输入的密码使用 * 号代替也可
  • 每个密码块里写一个用于展示提示符的 div 根据 place 匹配提示符应该出现的格子
  • input 的层级需要高于六个密码展示块,设置 opacity: 0; 把 input 隐藏起来,这样用户就看不到 input 框,点击密码块的时候其实是点击的 input 框进行输入
  • 密码块遍历密码数组做对应的展示就行

代码如下:





效果图:
写了一个密码输入框【pc】_第1张图片

你可能感兴趣的:(vue.jscss前端)