vue2实现手势密码功能

vue2实现手势密码功能

本文实例为大家分享了vue2实现手势密码功能的具体代码,供大家参考,具体内容如下

组件:

<template>   <div class="masks" v-show="currentValue">     <div class="gesturePwd">       <div class="box">         <h4 ref="gestureTitle" class="gestureTitle">请绘制您的图形密码</h4>         <a class="reset" ref="updatePassword" @click="updatePassword()">重置密码</a>         <a class="close" ref="updatePassword" @click="closePwd(false)">关闭</a>         <canvas ref="canvas"></canvas>       </div>     </div>   </div> </template> <script>   export default {     props: {       value: {         type: Boolean,         default: false       },     },     data() {       return {         currentValue: false,         ctx: '',         width: 0,         height: 0,         devicePixelRatio: 0,         chooseType: '',         r: '',// 公式计算         lastPoint: [],         arr: [],         restPoint: [],         pswObj: {step: 2},         canvas: ''       }     },     watch: {       value: {         handler: function (val) {           this.currentValue = val         },         immediate: true       },       currentValue(val) {         this.$emit(val ? 'on-show' : 'on-hide')         this.$emit('input', val)       }     },     created() {       if (typeof this.value !== 'undefined') {         this.currentValue = this.value       }     },     mounted() {       this.setChooseType(3);     },     methods: {       closePwd(bol) {         this.$emit("handPwd",bol);         this.currentValue = false;       },       drawCle(x, y) { // 初始化解锁密码面板 小圆圈         this.ctx.strokeStyle = '#87888a';//密码的点点默认的颜色         this.ctx.lineWidth = 2;         this.ctx.beginPath();         this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);         this.ctx.closePath();         this.ctx.stroke();       },       drawPoint(style) { // 初始化圆心         for (var i = 0; i < this.lastPoint.length; i++) {           this.ctx.fillStyle = style;           this.ctx.beginPath();           this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2.5, 0, Math.PI * 2, true);           this.ctx.closePath();           this.ctx.fill();         }       },       drawStatusPoint(type) { // 初始化状态线条         for (var i = 0; i < this.lastPoint.length; i++) {           this.ctx.strokeStyle = type;           this.ctx.beginPath();           this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);           this.ctx.closePath();           this.ctx.stroke();         }       },       drawLine(style, po, lastPoint) {//style:颜色 解锁轨迹         this.ctx.beginPath();         this.ctx.strokeStyle = style;         this.ctx.lineWidth = 3;         this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);         for (var i = 1; i < this.lastPoint.length; i++) {           this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);         }         this.ctx.lineTo(po.x, po.y);         this.ctx.stroke();         this.ctx.closePath();       },       createCircle() {// 创建解锁点的坐标,根据canvas的大小来平均分配半径         var n = this.chooseType;         var count = 0;         this.r = this.ctx.canvas.width / (2 + 4 * n);// 公式计算         this.lastPoint = [];         this.arr = [];         this.restPoint = [];         var r = this.r;         for (var i = 0; i < n; i++) {           for (var j = 0; j < n; j++) {             count++;             var obj = {               x: j * 4 * r + 3 * r,               y: i * 4 * r + 3 * r,               index: count             };             this.arr.push(obj);             this.restPoint.push(obj);           }         }         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);         for (var i = 0; i < this.arr.length; i++) {           this.drawCle(this.arr[i].x, this.arr[i].y);         }       },       getPosition(e) {// 获取touch点相对于canvas的坐标         var rect = e.currentTarget.getBoundingClientRect();         var po = {           x: (e.touches[0].clientX - rect.left) * this.devicePixelRatio,           y: (e.touches[0].clientY - rect.top) * this.devicePixelRatio         };         return po;       },       update(po) {// 核心变换方法在touchmove时候调用         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);         for (var i = 0; i < this.arr.length; i++) { // 每帧先把面板画出来           this.drawCle(this.arr[i].x, this.arr[i].y);         }         this.drawPoint('#27AED5');// 每帧花轨迹         this.drawStatusPoint('#27AED5');// 每帧花轨迹         this.drawLine('#27AED5', po, this.lastPoint);// 每帧画圆心         for (var i = 0; i < this.restPoint.length; i++) {           if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {             this.drawPoint(this.restPoint[i].x, this.restPoint[i].y);             this.lastPoint.push(this.restPoint[i]);             this.restPoint.splice(i, 1);             break;           }         }       },       checkPass(psw1, psw2) {// 检测密码         var p1 = '', p2 = '';         for (var i = 0; i < psw1.length; i++) {           p1 += psw1[i].index + psw1[i].index;         }         for (var i = 0; i < psw2.length; i++) {           p2 += psw2[i].index + psw2[i].index;         }         return p1 === p2;       },       storePass(psw) {// touchend结束之后对密码和状态的处理         if (this.pswObj.step == 1) {           if (this.checkPass(this.pswObj.fpassword, psw)) {             this.pswObj.step = 2;             this.pswObj.spassword = psw;             this.$refs.gestureTitle.innerHTML = '密码保存成功';             this.drawStatusPoint('#2CFF26');             this.drawPoint('#2CFF26');             window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));             window.localStorage.setItem('chooseType', this.chooseType);           } else {             this.$refs.gestureTitle.innerHTML = '两次不一致,重新输入';             this.drawStatusPoint('red');             this.drawPoint('red');             delete this.pswObj.step;           }         } else if (this.pswObj.step == 2) {           if (this.checkPass(this.pswObj.spassword, psw)) {             var gestureTitle = this.$refs.gestureTitle;             gestureTitle.style.color = "#2CFF26";             gestureTitle.innerHTML = '解锁成功';             this.drawStatusPoint('#2CFF26');//小点点外圈高亮             this.drawPoint('#2CFF26');             this.drawLine('#2CFF26', this.lastPoint[this.lastPoint.length - 1], this.lastPoint);// 每帧画圆心             this.closePwd(true);           } else if (psw.length < 4) {             this.drawStatusPoint('red');             this.drawPoint('red');             this.drawLine('red', this.lastPoint[this.lastPoint.length - 1], this.lastPoint);// 每帧画圆心             var gestureTitle = this.$refs.gestureTitle;             gestureTitle.style.color = "red";             gestureTitle.innerHTML = '请连接4个点';           } else {             this.drawStatusPoint('red');             this.drawPoint('red');             this.drawLine('red', this.lastPoint[this.lastPoint.length - 1], this.lastPoint);// 每帧画圆心             var gestureTitle = this.$refs.gestureTitle;             gestureTitle.style.color = "red";             gestureTitle.innerHTML = '密码错误';           }         } else {           this.pswObj.step = 1;           this.pswObj.fpassword = psw;           this.$refs.gestureTitle.innerHTML = '再次输入';         }       },       makeState() {         if (this.pswObj.step == 2) {           this.$refs.updatePassword.style.display = 'block';           var gestureTitle = this.$refs.gestureTitle;           gestureTitle.style.color = "#87888a";           gestureTitle.innerHTML = '请解锁';         } else if (this.pswObj.step == 1) {           this.$refs.updatePassword.style.display = 'none';         } else {           this.$refs.updatePassword.style.display = 'block';         }       },       setChooseType(type) {         this.chooseType = type;         this.init();       },       updatePassword() {         window.localStorage.removeItem('passwordxx');         window.localStorage.removeItem('chooseType');         this.pswObj = {};         this.$refs.gestureTitle.innerHTML = '绘制解锁图案';         this.reset();       },       initDom() {         this.chooseType = Number(window.localStorage.getItem('chooseType')) || 3;         this.devicePixelRatio = window.devicePixelRatio || 1;         var canvas = this.$refs.canvas;         var width = this.width || 320;         var height = this.height || 320;         // 高清屏锁放         canvas.style.width = width + "px";         canvas.style.height = height + "px";         canvas.height = height * this.devicePixelRatio;         canvas.width = width * this.devicePixelRatio;       },       init() {         this.initDom();         this.pswObj = window.localStorage.getItem('passwordxx') ? {           step: 2,           spassword: JSON.parse(window.localStorage.getItem('passwordxx'))         } : {};         this.lastPoint = [];         this.makeState();         this.touchFlag = false;         this.canvas = this.$refs.canvas;         this.ctx = this.canvas.getContext('2d');         this.createCircle();         this.bindEvent();       },       reset() {         this.makeState();         this.createCircle();       },       bindEvent() {         var self = this;         this.canvas = this.$refs.canvas;         this.canvas.addEventListener("touchstart", function (e) {           e.preventDefault();// 某些android 的 touchmove不宜触发 所以增加此行代码           var po = self.getPosition(e);           for (var i = 0; i < self.arr.length; i++) {             if (Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r) {               self.touchFlag = true;               self.drawPoint(self.arr[i].x, self.arr[i].y);               self.lastPoint.push(self.arr[i]);               self.restPoint.splice(i, 1);               break;             }           }         }, false);         this.canvas.addEventListener("touchmove", function (e) {           if (self.touchFlag) {             self.update(self.getPosition(e));           }         }, false);         this.canvas.addEventListener("touchend", function (e) {           if (self.touchFlag) {             self.touchFlag = false;             self.storePass(self.lastPoint);             setTimeout(function () {               self.reset();             }, 1000);           }         }, false);       }     }   } </script> <style scoped>   .masks {     text-align: center;     position: fixed;     z-index: 1000;     top: 0;     right: 0;     left: 0;     bottom: 0;     background: rgba(0, 0, 0, 0.6);   }   .gesturePwd {     position: fixed;     z-index: 5000;     width: 100%;     height: 100%;     top: 50%;     left: 50%;     -webkit-transform: translate(-50%, -50%);     transform: translate(-50%, -50%);     text-align: center;     border-radius: 3px;     overflow: hidden;     background-color: #000;   }   .gestureTitle {     color: #87888a;     margin-top: 85px;     font-size: 20px;     font-weight: normal;   }   .box{     position: absolute;     top:0;     left:0;     right:0;     bottom:0;   }   .box a{     position: absolute;     top: 5px;     color:#fff;     font-size: 13px;     display:block;   }   a.reset{     left: 5px;   }   a.close{     right :5px;   }   .box canvas{     background-color: #000;     display: inline-block;     margin-top: 76px;     width: 320px;     height: 320px;   } </style>

调用:

<template>   <div class="hello">     <button @click="showClicked" style="width:90px;height:50px;font-size:16px;background-color:#eee">手势密码</button>     <pwd v-model="showPwd" @handPwd="handPwd"></pwd>   </div> </template> <script>   import pwd from '@/components/pwd'   export default {     name: 'hello',     data() {       return {         showPwd: false       }     },     methods: {       showClicked() {         this.showPwd = true;       },       handPwd(val) {         console.log(val);       }     },     components: {       pwd     },   } </script>

推荐阅读

    iPad的手势功能iPad4手势的使用教程

    iPad的手势功能iPad4手势的使用教程,,可能有很多朋友刚刚接触过iPad,他们对手势的功能和用法知之不多。以下是对iPad手势使用的简单介绍。

    vue项目一些常见问题

    vue项目一些常见问题,组件,样式,**样式污染问题**同样的样式不需要在每个组件都复制组件内单独的样式加外层class包裹。加scope。否则只是

    01-Vue项目实战-网易云音乐-准备工作

    01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来的一段时间,我会仿照网易云音乐,利用Vue开发一个移动端的网易云音乐项目。在做

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自己的,后台,后台框架一直想开发一套完全属于自己的后台,但是18年的时候,曾经答

    手势设置下载|手势设置下载软件

    手势设置下载|手势设置下载软件,,1. 手势设置下载软件1.、首先,打开手机的“设置”应用程序,并点击页面中的“通用”选项;2、进入通用页面后,

    电脑鼠标手势|电脑鼠标手势怎么设置

    电脑鼠标手势|电脑鼠标手势怎么设置,,1. 电脑鼠标手势怎么设置打开控制面板,点击“鼠标”。2、点击上方最后一个标签,然后点击下面的“选项

    Vue项目中 App.vue文件

    Vue项目中 App.vue文件,文件,内容, 在App.vue文件中,定义了一个id为app的div,在这个div板块中放置Helloworld组件,文件内容如下图所示:在

    电脑钢琴手势|钢琴指法手势

    电脑钢琴手势|钢琴指法手势,,1. 钢琴指法手势一般情况下,全音符为四拍,二分音符为两拍,四分音符为一拍,八分音符为半拍。打拍子的时候,每拍打一