Uniapp实现旋转滑块验证码(兼容App+H5+PC)

永无止境888

已于 2022-07-20 20:06:00 修改

阅读量4k

点赞数 1

分类专栏： uniapp 旋转滑块验证码滑块验证码文章标签：前端前端框架

于 2022-07-20 11:50:27 首次发布

本文链接：https://blog.csdn.net/weixin_56749645/article/details/125888746

版权

使用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
              }
            "
            class&#