在開發用戶模塊的時候，相信大家都碰到過一個功能，圖片滑動解鎖后發送驗證碼，這里分享我用uni-app制作的一個小控制元件
效果如下：
需要如下圖片資源
template
<template>
<view v-if="shows" @tap="shows=false">
<view @touchend="onEnd">
<view >
<image :src="https://www.cnblogs.com/smileZAZ/p/imgUrl+'/tfgg-verify/'+img+'.jpg'" ></image>
</view>
<view >
<view :style="{top:top+'px',left:left+'px'}"></view>
<movable-area :animation="true">
<movable-view :x="x" direction="horizontal" @change="onMove">
<view :style="{top:top+'px'}"><image :src="https://www.cnblogs.com/smileZAZ/p/imgUrl+'/tfgg-verify/'+img+'.jpg'" :style="{top:-lefttop+'px',left:-left+'px'}"></image></view>
</movable-view>
</movable-area>
<view >拖動左邊滑塊完成上方拼圖</view>
</view>
</view>
</view>
</template>
script
<script>
import app from "@/api/app.js";
export default {
name: 'tfgg-verify',
data() {
return {
imgUrl: app.appImg,
x: 0,//初始距離
oldx:0,//移動的距離
img:'0',//顯示哪張圖片
left:'',//隨機拼圖的最終X軸距離
top:'',//拼圖的top距離
lefttop:'',//拼圖內容的top距離
shows:false
};
},
mounted() {
this.shuaxinVerify()
},
methods: {
//重繪驗證
shuaxinVerify(){
var gl = Math.random();
this.left = uni.upx2px(500)*gl>uni.upx2px(250)?(uni.upx2px(500)*gl):uni.upx2px(250);//生成隨機X軸最終距離
this.top = -(uni.upx2px(25)+uni.upx2px(343)-(uni.upx2px(263)*gl));//生成隨機Y軸初始距離
this.lefttop = uni.upx2px(263)*gl;//生成隨機Y軸初始距離
if(gl<=0.25){
this.img=1
}if(gl>0.25&&gl<=5){
this.img=2
}if(gl>0.5&&gl<=0.75){
this.img=3
}if(gl>0.75&&gl<=1){
this.img=4
}
},
/* 滑動中 */
onMove(e) {
this.oldx = e.detail.x;
},
/* 滑動結束 */
onEnd() {
if(Math.abs(this.oldx-this.left)<=5){
uni.showToast({
title: '驗證成功'
});
this.$emit("result",true);
this.hide();
}else{
uni.showToast({
title: '驗證失敗'
});
this.shuaxinVerify()
this.reset()
}
},
/* 重置 */
reset(){
console.log('重置');
this.x = 1;
this.oldx = 1;
setTimeout(()=>{
this.x = 0;
this.oldx = 0;
},300)
},
show(){
this.shows=true;
},
hide(){
this.shows=false;
}
}
}
</script>
style
<style>
.zhezhao{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
z-index: 999;
}
.verifyBox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 85%;
background-color: #fff;
border-radius: 20upx;
box-shadow: 0 0 5upx rgba(0,0,0);
}
.pintuBox{
position: relative;
}
.pintuBg{
width: 610upx;
height: 343upx;
display: block;
margin: 17upx auto;
}
.huakuaiBox{
position: relative;
height: 80upx;
width: 610upx;
margin: 25upx auto;
}
.yinying{
position: absolute;
width: 80upx;
height: 80upx;
background-color: rgba(0,0,0,.5);
}
.huakuaiBox movable-area{
height: 80upx;
width: 100%;
}
.huakuaiBox movable-area movable-view{
width: 80upx;
height: 80upx;
border-radius: 50%;
background-color: #007cff;
background-image: url(../../static/images/tfgg-verify/icon-button-normal.png);
background-repeat: no-repeat;
background-size: auto 30upx;
background-position: center;
position: relative;
z-index: 100;
}
.pintukuai{
position: absolute;
top: -105upx;
left: 0;
width: 100%;
height: 100%;
z-index: 101;
box-shadow: 0 0 5upx rgba(0,0,0,.3);
overflow: hidden;
}
.pintukuai image{
max-width: none;
position: absolute;
top: 0;
left: 0;
width: 610upx;
height: 343upx;
}
.huadao{
position: absolute;
width: calc(100% - 35upx);
height: 65upx;
line-height: 65upx;
background: #eee;
box-shadow: inset 0 0 5upx #ccc;
border-radius: 60upx;
color: #999;
text-align: center;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 18upx;
padding-right: 35upx;
z-index: 99;
}
</style>
呼叫方法
引入控制元件
import tfggVerify from "@/components/tfgg-verify/tfgg-verify.vue"
view里加上
<tfgg-verify @result='verifyResult' ref="verifyElement"></tfgg-verify>
components加上
components: {
"tfgg-verify": tfggVerify
},
方法案例
/* 校驗結果回呼函式 */
verifyResult(res) {
if (res) {
this.$refs.verifyElement.reset(); //校驗成功重置插件
console.log('驗證成功')
}
console.log(res);
},
/* 顯示校驗彈窗 */
verifyFasong() {
this.$refs.verifyElement.show();
},
/* 校驗插件重置 */
verifyReset() {
this.$refs.verifyElement.reset();
},
如果本文章對你有幫助，請點個推薦，歡迎關注我，我會定期更新或分享開發中碰到的問題及解決方法，希望與你共同進步(*^▽^*)，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/251547.html
標籤：HTML5