0


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

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

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

示例代码:

  1. <template>
  2. <view id="app">
  3. <button @click="open">验证</button>
  4. <slider-captcha
  5. v-model="visible"
  6. :options="options"
  7. :loading="loading"
  8. @check="check"
  9. @close="close"
  10. @refresh="getSliderOptions"
  11. @error="getSliderOptions"
  12. >
  13. <!-- vue2 -->
  14. <view slot="title">自定义标题-安全验证</view>
  15. <view slot="successText">自定义成功提示-登录中</view>
  16. <view slot="errorText">自定义错误提示-是不是太难了换一个</view>
  17. <view slot="tips">自定义提示拖动下方滑块完成拼图</view>
  18. <!-- <view slot="question">自定义提示</view> -->
  19. <!-- vue2 -->
  20. <!-- vue3 -->
  21. <template #title>自定义标题-安全验证</template>
  22. <template #successText>自定义成功提示-登录中</template>
  23. <template #errorText>自定义错误提示-是不是太难了换一个</template>
  24. <template #tips>自定义提示拖动下方滑块完成拼图</template>
  25. <!-- <template #question>自定义提示</template> -->
  26. <!-- vue3 -->
  27. </slider-captcha>
  28. </view>
  29. </template>
  30. <script>
  31. import SliderCaptcha from '@/components/kkokk-slider-captcha.vue'
  32. export default {
  33. components:{SliderCaptcha},
  34. data(){
  35. return {
  36. visible: false,
  37. loading: false,
  38. options: {}
  39. }
  40. },
  41. methods: {
  42. // 打开触发
  43. open() {
  44. this.visible = true
  45. this.getSliderOptions()
  46. },
  47. // 验证
  48. check(sliderKey, sliderX, done, error)
  49. {
  50. // 这里是验证是否成功的接口
  51. this.loading = true
  52. uni.request({
  53. url: 'http://192.168.10.76:8111/',
  54. header: {
  55. // 'Content-Type': 'application/x-www-form-urlencoded'
  56. 'Content-Type': 'application/json' //自定义请求头信息
  57. },
  58. data:{
  59. sliderKey:sliderKey,
  60. sliderX:sliderX
  61. },
  62. method:'POST',//请求方式,必须为大写
  63. success: (res) => {
  64. this.loading = false
  65. done()
  66. },
  67. fail: () => {
  68. this.loading = false
  69. error()
  70. }
  71. })
  72. },
  73. // 关闭触发
  74. close() {
  75. },
  76. // 获取滑块验证参数
  77. getSliderOptions()
  78. {
  79. this.loading = true
  80. uni.request({
  81. url: 'http://192.168.10.76:8111/',
  82. header: {
  83. // 'Content-Type': 'application/x-www-form-urlencoded'
  84. 'Content-Type': 'application/json' //自定义请求头信息
  85. },
  86. method:'GET',//请求方式,必须为大写
  87. success: (res) => {
  88. const {img, key, y} = res.data
  89. this.options = {
  90. sliderImg: img,
  91. sliderKey: key,
  92. sliderY: y
  93. }
  94. this.loading = false
  95. }
  96. })
  97. }
  98. }
  99. }
  100. </script>

使用效果:

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


本文转载自: https://blog.csdn.net/weixin_59685936/article/details/140661028
版权归原作者 某公司摸鱼前端 所有, 如有侵权,请联系我们删除。

“推荐一款前端滑动验证码插件(Vue、uniapp)”的评论:

还没有评论