Vue框架教你玩转手机手势密码，红彤彤小白点等你来戳

其实大家都爱用手机app，所以就会常用手势密码这个方便的功能来解绑。这儿有个小妙招告诉你怎么用Vue框架搞定它，那就是：先要做好组件，处理好结束事件，最后试运行看下效果如何。

一、准备工作

先把Vue装进电脑里才行！npm install vue或者yarn add vue装个框架，然后用Vue CLI新建个叫“Gesture Password”的项目。创建好以后记得cd进去，再用npm run serve或者yarn serve开个服务器。

二、实现手势密码组件

咱们来写个叫做”GesturePassword”的Vue组件，是用来弄手势密码那种，听着很高大上~这个组件主要是用v-for画出9个小白点，然后再给每个白点点个按钮，用来处理触摸事件，感觉特好玩。而且，还能根据状态改一下小白点的样式，让它们变得红彤彤哒！

三、处理手势密码结束事件

别以为只需弄手势密码和转移这两个步骤就完事了，还得处理好密码输入成功后的这件“收尾”工作！怎么回事？我们可以这样操作：给GesturePassword组件添加一个callback属性，当用户放下手指时将选中的小点传过去；另外，再创建一个Vue组件叫Home，用它来显示密码的输入效果，同时还要做好验证检查！

  

    

  


export default {
  data() {
    return {
      selectedPoints: []
    };
  },
  methods: {
    touchStart(n) {
      this.selectedPoints = [n];
    },
    touchMove(n) {
      if (!this.selectedPoints.includes(n)) {
        this.selectedPoints.push(n);
      }
    },
    touchEnd() {
      // 处理手势密码结束事件
    }
  }
};


.gesture-password {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.point {
  flex-basis: 32%;
  height: 30%;
  margin: 5px;
  background-color: #ccc;
  border-radius: 50%;
}
.point-selected {
  background-color: #ff0000;
}

四、运行和测试

搞定上面那堆东西后，直接在命令行敲入”npm run serve”,你就能启动开发服务器。接着，打开浏览器，输入”localhost:8080/”，访问九宫格页面。随意划拉几下，留神别错过那颜色的小变化;放手即见计算答案，还有检验正误

五、优化与扩展

除了简单操作外，咱还可以让手势密码更棒！比如说设个错误次数限制，错太多就让你停一会儿；还有，弄点好玩的，比如触感振动这种小彩蛋；当然别忘了根据不同手机型号和屏幕大小做调整哈。

六、安全性考虑

敲手势密码时，要留个神儿，看看稳定性如何！避免别人钻空子，大家要好好审查用户的输入滴~隐私信息记得加密保护喔，用起来才放心。

props: {
  callback: {
    type: Function,
    required: true
  }
}

七、用户体验优化

别光看性能和安全，用户体验也要好才行！给新人做个简易指引教他们设个初始密码；界面设计也要简单易懂，用得舒服嘛；还有反馈机制，别让人摸不着头脑就好嘞。

八、社区资源分享

touchEnd() {
  this.callback(this.selectedPoints);
}

Vue现在很火，它的社区里，资料超级丰富。要学习怎么搞出手势密码特效吗？直接看看文档也行，或者加入个群聊，听听大家的意见，不但能学知识，还能和小伙伴们聊天。如果你够厉害，还可以分享自己的经验，给开源工程添砖加瓦！

结论

读了我们这篇文章还有看看具体的实例代码，你就能学会怎么用Vue这个厉害的框架来做个实用的手势密码。数据绑定和组件化技术保证了手势密码的简单易用和美观大方。你甚至可以按照自己的想法调整和添加代码，让功能越来越强悍、越好使~

  

    
    

      
您输入的手势密码是：
      
{{ password.join(', ') }}
      
{{ message }}
    
  


import GesturePassword from './components/GesturePassword.vue';
export default {
  components: {
    GesturePassword
  },
  data() {
    return {
      password: null,
      message: ''
    };
  },
  methods: {
    checkPassword(selectedPoints) {
      if (selectedPoints.length < 4) {
        this.password = null;
        this.message = '手势密码长度不能少于4个点！';
      } else {
        this.password = selectedPoints;
        this.message = '手势密码验证通过！';
      }
    }
  }
};


.home {
  text-align: center;
  margin: 100px auto;
}

首先，我要来讲讲怎样利用Vue做手势密码功能！以便大家能多了解一些前端编程有意思的事儿～。