Vue 手写滑动验证码（内附使用文档）_vue手写滑动验证码-优快云博客

本文链接：https://blog.youkuaiyun.com/bueryao527/article/details/126700864

本教程详细介绍了如何使用Vue实现自定义的手写滑动验证码。包括完整的代码示例、配置选项及使用方法。通过该组件可以轻松地为网站添加滑动验证功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 手写滑动验证码（内附使用文档）

手写滑动验证码

手写滑动验证码

1.效果图

在这里插入图片描述

2.目录

在这里插入图片描述

3.index.vue

<template>
  <div class="canvas-box">
    <div style="margin-bottom:20px">
      <span>拖动下发滑块完成拼图</span>
      <span v-if="!isShowRefresh" style="float:right;cursor: pointer;" @click="info">刷新</span>
    </div>
    <div v-if="isVerify" id="canvas_wrap"></div>
  </div>
</template>

<script>
import slider from "./slider";
export default {
  data() {
    return {
      isVerify: true,
      isShowRefresh:false
    };
  },
  mounted() {
    this.info();
  },
  methods: {
    //加载验证信息
    info: function () {
      let _this = this
      let params = {
        el: "#canvas_wrap",
        w: 390,
        h: 210,
        imgArr: [require("./images/timg.png"),require("./images/timg1.png"),require("./images/timg2.png")],
        refreshIcon: require("./images/refresh.png"),
        sliderTextName: "向右滑动填充拼图",
        sliderW:60,
        isShowRefresh:_this.isShowRefresh,
        silderBarHeight:35,
        silderBarBgColor:'#E5E5E5',
        silderBarTextColor:'#333333',
        silderBarActiveBgColor:'#1678FF',
        silderBarActiveTextColor:'#ffffff',
        refresh: function () {
          console.log('---------刷新');
        },
        finish: function (bool) {
          if (bool) {
            console.log('---------成功');
          } else {
            console.log('---------失败');
          }
        },
      };
      slider(params);
    },
  },
};
</script>

<style scoped>
.canvas-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#canvas_wrap canvas {
  display: block;
}
</style>

4.使用文档

参数名	数据类型	默认值	说明
el	String	-	滑动模块id
w	Number	280	canvas的宽度
h	Number	150	canvas的高度
range	Number	5	相差多少像素内触发成功
imgArr	Array	-	滑动模块背景图片
refreshIcon	String	refresh.png	刷新按钮
sliderW	Number	60	slider 滑块的边长
sliderTextName	String	向右滑动填充拼图	验证文字
isShowRefresh	Boolean	true	是否显示刷新按钮
silderBarHeight	Number	30	底部滑动条高度
silderBarBgColor	String	#E5E5E5	滑动条未滑动背景颜色
silderBarTextColor	String	#333333	滑动条未滑动字体颜色
silderBarActiveBgColor	String	#1678FF	滑动条滑动区域背景颜色
silderBarActiveTextColor	String	#FFFFFF	滑动条滑动区域字体颜色
refresh	Function	-	刷新回调
finish	Function	-	完成回调（成功返回true，失败返回false）

5.资源

链接: https://download.youkuaiyun.com/download/bueryao527/86569687

6.注意

如引用本文内容，请标明出处。
有问题可留言