前端开发框架
当前页

拖拽验证码 ​

效果 ​

verify.png

使用示例 ​

<BasicDragVerify
              :width="verifyWidth"
              ref="el2"
              @success="handleSuccess"
              circle
            />
import {
    BasicDragVerify,
    DragVerifyActionType,
    PassingData,
  } from '/@/components/sys/Verify';
const el2 = ref<Nullable<DragVerifyActionType>>(null);
function handleSuccess(data: PassingData) {
    const { time } = data;
    successText.value = `校验成功 耗时${time}秒`;
    canLogin.value = true;
  }

属性说明 ​

属性类型默认值说明
valuebooleanfalse是否通过验证
textstring'拖动以进行校验'提示信息
successTextstring'验证通过'通过验证后显示信息
heightnumber40高度
widthnumber200宽度
circlebooleanfalse是否圆角
contentStyleobject{}内容样式
barStyleobject{}拖动条样式

图片还原验证码 ​

组件安装 ​

pnpm i vue3-slide-verify

效果 ​

vue3-slide-verify.png

参数和事件 ​

参数 ​

注意：不支持style控制宽度和高度，会导致图片自动无法适配宽度

ParamTypeDescribeVersion
lNumber滑块的宽度(见效果图:l说明)
rNumber滑块缺口的角度(见效果图:r说明)
wNumbercanvas width
hNumbercanvas height
sliderTextStringSlide filled right
imgsArraypicture array 背景图数组，默认值 []
accuracyNumber滑动验证的误差范围，默认值 5
showBoolean是否显示刷新按钮，默认值 true
intervalNumber节流函数的时间间隔，默认值 501.1.2

事件 ​

EventTypeDescribeVersion
successFunctionsuccess callback返回时间参数，单位为毫秒
failFunctionfail callback
refreshFunction点击刷新按钮后的回调函数
againFunction检测到非人为操作滑动时触发的回调函数

example ​

参考如下写法

vue
<template>
  <div>
    <slide-verify
      ref="block"
      :slider-text="text"
      :accuracy="accuracy"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
    <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button>
    <div>{{ msg }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";

export default defineComponent({
  components: { SlideVerify },

  setup() {
    const msg = ref("");
    const block = ref<SlideVerifyInstance>();

    const onAgain = () => {
      msg.value = "检测到非人为操作的哦！ try again";
      // 刷新
      block.value?.refresh();
    };

    const onSuccess = (times: number) => {
      msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
    };

    const onFail = () => {
      msg.value = "验证不通过";
    };

    const onRefresh = () => {
      msg.value = "点击了刷新小图标";
    };

    const handleClick = () => {
      // 刷新
      block.value?.refresh();
      msg.value = "";
    };

    return {
      block,
      msg,
      text: "向右滑动->",
      accuracy: 1,
      onAgain,
      onSuccess,
      onFail,
      onRefresh,
      handleClick,
    };
  },
});
</script>