<template>
|
<view class="gesture-lock" :class="{error:error}" :style="{width: containerWidth +'rpx', height:containerWidth +'rpx'}"
|
@touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove" @touchend.stop="onTouchEnd">
|
<!-- 同级 v-for 的 key 重复会有问题，需要套一层。 -->
|
<!-- 9 个圆 -->
|
<view>
|
<view v-for="(item,i) in circleArray" :key="i" class="cycle" :class="{check:item.check}" :style="{left:item.style.left,top:item.style.top,width:item.style.width,height:item.style.width}">
|
</view>
|
</view>
|
<view>
|
<!-- 已激活锁之间的线段 -->
|
<view v-for="(item,i) in lineArray" :key="i" class="line" :style="{left:item.activeLeft,top:item.activeTop,width:item.activeWidth,'-webkit-transform':'rotate('+item.activeRotate+')',transform:'rotate('+item.activeRotate+')'}">
|
</view>
|
</view>
|
<!-- 最后一个激活的锁与当前位置之间的线段 -->
|
<view class="line" :style="{left:activeLine.activeLeft,top:activeLine.activeTop,width:activeLine.activeWidth,'-webkit-transform':'rotate('+activeLine.activeRotate+')',transform:'rotate('+activeLine.activeRotate+')'}">
|
</view>
|
</view>
|
</template>
|
<script>
|
import GestureLock from './gestureLock';
|
|
export default {
|
name: 'index',
|
props: {
|
/**
|
* 容器宽度
|
*/
|
containerWidth: {
|
type: [Number, String],
|
default: 0
|
},
|
/**
|
* 圆的半径
|
*/
|
cycleRadius: {
|
type: [Number, String],
|
default: 0
|
},
|
/**
|
* 已设定的密码
|
*/
|
password: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
},
|
data() {
|
return {
|
gestureLock: {}, // 锁对象
|
circleArray: [], // 圆对象数组
|
lineArray: [], // 已激活锁之间的线段
|
activeLine: {}, // 最后一个激活的锁与当前位置之间的线段
|
error: false
|
}
|
},
|
methods: {
|
onTouchStart(e) {
|
this.gestureLock.onTouchStart(e);
|
this.refesh();
|
},
|
|
onTouchMove(e) {
|
this.gestureLock.onTouchMove(e);
|
this.refesh();
|
},
|
|
onTouchEnd(e) {
|
const checkPoints = this.gestureLock.onTouchEnd(e);
|
if (!this.password.length || checkPoints.join('') == this.password.join('')) {
|
this.refesh();
|
this.$emit('end', checkPoints);
|
} else {
|
this.error = true;
|
setTimeout(() => {
|
this.refesh();
|
this.$emit('end', checkPoints);
|
}, 800);
|
}
|
|
},
|
refesh() {
|
this.error = false;
|
this.circleArray = this.gestureLock.getCycleArray();
|
this.lineArray = this.gestureLock.getLineArray();
|
this.activeLine = this.gestureLock.getActiveLine();
|
}
|
},
|
mounted() {
|
this.gestureLock = new GestureLock(this.containerWidth, this.cycleRadius);
|
this.refesh();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.gesture-lock {
|
margin: 0 auto;
|
position: relative;
|
box-sizing: border-box;
|
overflow: auto;
|
}
|
|
.gesture-lock .cycle {
|
box-sizing: border-box;
|
position: absolute;
|
border: 2px solid #66aaff;
|
border-radius: 50%;
|
}
|
|
.gesture-lock .cycle.check:after {
|
content: "";
|
display: block;
|
position: absolute;
|
width: 32%;
|
height: 32%;
|
border: 2px solid #66aaff;
|
border-radius: 50%;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
.gesture-lock .line {
|
height: 0;
|
border-top: 2px solid #66aaff;
|
position: absolute;
|
transform-origin: left center;
|
}
|
|
.gesture-lock.error .cycle.check,
|
.gesture-lock.error .cycle.check:after,
|
.gesture-lock.error .line {
|
border-color: #ffa197;
|
}
|
</style>
|
