69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
<template>
|
||
<view style="border-radius:5px;transition: all .5s;" :style="{width:pix+'px',height:pix+'px',border:'1px solid ' + color}">
|
||
<view :style="{opacity: (count >= maxclk?0:1),background:color,marginTop:top+'px',marginLeft:left+'px'}" @tap="chkxw" style="transition: all .5s; width:20px;height:20px;border-radius: 10px;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//hidden: 加密正确答案，用户答案，验证码，手机号
|
||
//选择验证方式
|
||
//是否短信验证
|
||
//答题验证，请求img图片及加密答案
|
||
//图片验证，请求img图片及加密答案
|
||
//滑动验证，请求img图片及加密目标位置
|
||
//文字验证，请求img图片及加密文字位置
|
||
//
|
||
//短信验证码(上面验证后，才能申请发送)
|
||
var app = getApp();
|
||
export default {
|
||
behaviors: ['uni://form-field-group']
|
||
, props: {
|
||
pix: {
|
||
type: Number
|
||
, default: 100
|
||
}
|
||
, maxclk: {
|
||
type: Number
|
||
, default: 3
|
||
}
|
||
, }
|
||
, data() {
|
||
return {
|
||
count: -1
|
||
, color: ''
|
||
, top: 0
|
||
, left: 0
|
||
};
|
||
}
|
||
, mounted() {
|
||
this.chkxw();
|
||
}
|
||
, methods: {
|
||
chkxw(e) {
|
||
this.count++;
|
||
if (this.count >= this.maxclk) {
|
||
this.color = '#21c33c';
|
||
}else{
|
||
this.color = '#cc0000';
|
||
this.top = parseInt(Math.random() * (this.pix - 20));
|
||
this.left = parseInt(Math.random() * (this.pix - 20));
|
||
}
|
||
if (!e)
|
||
return;
|
||
this.$emit('change', {
|
||
ok: this.maxclk <= this.count
|
||
, top: this.top
|
||
, left: this.left
|
||
, detail: e.detail
|
||
});
|
||
}
|
||
, init(){
|
||
this.count = -1;
|
||
this.chkxw();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style> |