更新记录

1.16（2023-12-12）

优化

1.1.5（2023-12-08）

弹窗层级

1.1.4（2023-12-08）

兼容小程序

平台兼容性

使用说明

配合后端仓库

gitee poster

github poster

一起使用的滑块验证 vue 版本

示例

复制到浏览器打开查看效果

https://gitee.com/langlanglang/poster/raw/master/tests/122301561368230151165-1.gif

Attributes

Events

示例

<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>