uniapp版本：滑块拼图验证码，有后端，简单几步即可实现，小程序、h5都可以用 - DCloud 插件市场

Vue版本及cdn版本可以查阅文档： 行为验证 | Poster 文档

示例代码：

<code><template>

<view id="app">code>

<button @click="open">验证</button>code>

<slider-captcha

v-model="visible"code>

:options="options"code>

:loading="loading"code>

@check="check"code>

@close="close"code>

@refresh="getSliderOptions"code>

@error="getSliderOptions"code>

>

<!-- vue2 -->

<view slot="title">自定义标题-安全验证</view>code>

<view slot="successText">自定义成功提示-登录中</view>code>

<view slot="errorText">自定义错误提示-是不是太难了换一个</view>code>

<view slot="tips">自定义提示拖动下方滑块完成拼图</view>code>

<!-- <view slot="question">自定义提示</view> -->code>

<!-- vue2 -->

<!-- vue3 -->

<template #title>自定义标题-安全验证</template>

<template #successText>自定义成功提示-登录中</template>

<template #errorText>自定义错误提示-是不是太难了换一个</template>

<template #tips>自定义提示拖动下方滑块完成拼图</template>

<!-- <template #question>自定义提示</template> -->

<!-- vue3 -->

</slider-captcha>

</view>

</template>

<script>

import SliderCaptcha from '@/components/kkokk-slider-captcha.vue'

export default {

components:{SliderCaptcha},

data(){

return {

visible: false,

loading: false,

options: {}

}

},

methods: {

// 打开触发

open() {

this.visible = true

this.getSliderOptions()

},

// 验证

check(sliderKey, sliderX, done, error)

{

// 这里是验证是否成功的接口

this.loading = true

uni.request({

url: 'http://192.168.10.76:8111/',

header: {

// 'Content-Type': 'application/x-www-form-urlencoded'

'Content-Type': 'application/json' //自定义请求头信息

},

data:{

sliderKey:sliderKey,

sliderX:sliderX

},

method:'POST',//请求方式，必须为大写

success: (res) => {

this.loading = false

done()

},

fail: () => {

this.loading = false

error()

}

})

},

// 关闭触发

close() {

},

// 获取滑块验证参数

getSliderOptions()

{

this.loading = true

uni.request({

url: 'http://192.168.10.76:8111/',

header: {

// 'Content-Type': 'application/x-www-form-urlencoded'

'Content-Type': 'application/json' //自定义请求头信息

},

method:'GET',//请求方式，必须为大写

success: (res) => {

const {img, key, y} = res.data

this.options = {

sliderImg: img,

sliderKey: key,

sliderY: y

}

this.loading = false

}

})

}

}

}

</script>

使用效果：

唯一不足的是：依赖的后端环境是php