推荐一款前端滑动验证码插件(Vue、uniapp)

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

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

示例代码:

javascript 复制代码
<template>
  <view id="app">
    <button @click="open">验证</button>
    <slider-captcha 
      v-model="visible"
      :options="options"
      :loading="loading"
      @check="check"
      @close="close"
      @refresh="getSliderOptions"
      @error="getSliderOptions"
    >
            <!-- vue2 -->
      <view slot="title">自定义标题-安全验证</view>
      <view slot="successText">自定义成功提示-登录中</view>
      <view slot="errorText">自定义错误提示-是不是太难了换一个</view>
      <view slot="tips">自定义提示拖动下方滑块完成拼图</view>
            <!-- <view slot="question">自定义提示</view> -->
            <!-- 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

相关推荐
Dragon Wu几秒前
前端 Canvas 绘画 总结
前端
CodeToGym5 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫6 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫10 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat12 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。2 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui