更新记录

1.0.0（2026-02-06） 下载此版本

• 首次发布
• 支持 H5、微信/支付宝小程序、Android/iOS App、鸿蒙
• Canvas 按端自动选用 type="2d" 或 canvas-id 方案
• 支持 maxWidthRpx 弹窗内限宽、refreshScale 打开后刷新缩放
• 暴露 reset、setSuccess、setFail、refreshScale 方法，便于与登录等业务联动

平台兼容性

uni-app(3.6.16)

slide-verify 滑块验证码组件

uni-app 多端滑块验证码组件，支持 H5、微信/支付宝等小程序、Android/iOS App、鸿蒙。

特性

• 支持 H5、小程序、App、鸿蒙，Canvas 按端自动选用稳定方案（H5 用 type="2d"，App/鸿蒙/小程序用 canvas-id + createCanvasContext）
• 支持缩放、弹窗内限制宽度（maxWidthRpx）
• 暴露 reset、refreshScale、setSuccess、setFail 方法，便于与登录等业务联动

安装

将 slide-verify.vue 放入项目（如 components/slide-verify/），按需引入。

基本用法

<template>
  <SlideVerify
    ref="slideRef"
    :background-img="captchaData.backgroundImg"
    :slider-img="captchaData.sliderImg"
    :block-y="captchaData.captchaY"
    :show-error-mask="showErrorMask"
    slider-text="按住滑块，拖动到合适位置"
    @success="onSuccess"
    @refresh="onRefresh"
  />
</template>

<script setup>
import SlideVerify from '@/components/slide-verify/slide-verify.vue'

const slideRef = ref(null)
const captchaData = ref({ backgroundImg: '', sliderImg: '', captchaY: 70 })
const showErrorMask = ref(false)

const onSuccess = (left) => {
  console.log('滑动结束，x 坐标(取整):', left)
  // 将 left 传给后端校验
}

const onRefresh = () => {
  // 重新请求验证码接口，更新 captchaData
}

// 验证失败时
slideRef.value?.setFail?.()
showErrorMask.value = true

// 刷新/重试时
showErrorMask.value = false
slideRef.value?.reset?.()
</script>

Props

事件

方法（通过 ref 调用）

弹窗内使用

弹窗内建议限制宽度并打开后刷新缩放，避免超出：

<SlideVerify
  ref="slideRef"
  :max-width-rpx="536"
  :background-img="captchaData.backgroundImg"
  :slider-img="captchaData.sliderImg"
  :block-y="captchaData.captchaY"
  @success="onSuccess"
  @refresh="onRefresh"
/>
<!-- 弹窗打开后 -->
slideRef.value?.refreshScale?.()

平台说明

• H5：使用 type="2d" + getContext('2d')
• 小程序 / 鸿蒙 / Android·iOS App：使用 canvas-id + uni.createCanvasContext，保证各端显示稳定

许可证

MIT