使用uniapp实现旋转滑块验证码,兼容Android、IOS、H5、PC平台。先给大家看实现的效果
首先,思路是把旋转滑块验证码封装成一个子组件。在需要用到旋转验证码的地方直接调用即可。
子组件代码:
son.vue
<template>
<view>
// u-popup是Uview弹出层组件
<u-popup :show="showFlag" :round="10" mode="center">
<view class="slider rotate">
<view class="close" @click="cancel">
<u-icon name="close-circle" size="25px"></u-icon>
</view>
<view class="content">
<view class="bg-img-div">
<img
v-if="captcha.bgImage"
ref="bgImg"
:src="captcha.bgImage"
alt
/>
</view>
<view :style="sliderImgStyles" class="rotate-img-div">
<img
v-if="captcha.sliderImage"
ref="sliderImg"
:src="captcha.sliderImage"
alt
/>
</view>
</view>
<view class="slider-move">
<view class="slider-move-track">拖动滑块旋转正确位置</view>
<!-- #ifdef APP-PLUS -->
<view
:style="moveStyles"
class="slider-move-btn"
id="rotate-move-btn"
@mousedown="sliderDown($event)"
@touchstart="sliderDown($event)"
@touchmove="moveHandler"
@touchend="upHandler"
></view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view
:style="moveStyles"
class="slider-move-btn"
id="rotate-move-btn"
@mousedown="sliderDown($event)"
@touchstart="sliderDown($event)"
></view>
<!-- #endif -->
</view>
<view class="bottom">
<!-- <view
@click="
() => {
this.showFlag = false
}
"