Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Vue3 + typescript 实现的滑块验证码

ZhengXiaowei/vue3-slide-verify-code

Repository files navigation

Vue3 Slide Verify Code

Vue3 滑块验证码

参数

参数 类型 默认值 说明
containerSize {width: number, height: number} {width: 400, height: 250} 容器大小
slideSize number 56 滑块卡片的大小
slideRadius number 10 滑块卡片的圆圈半径
accuracy number 5 机器验证精确度,-1表示不验证是否机器
barText [string, html] "<< 按住滑块,向右拖动 >>" 滑块提示语
resource string[] [] 图片资源,默认使用https://picsum.photos上的资源

使用

<template>
 <touch-verify-code @success="onSuccess"
 @failed="onFailed"
 @refresh="onRefresh" />
</template>
<script>
import { defineComponent } from "vue";
import TouchVerifyCode from "@/components/TouchVerifyCode.vue";
const App = defineComponent({
 name: "App",
 components: {
 TouchVerifyCode,
 },
 setup() {
 const onSuccess = (time: number) => {
 console.log("验证成功", time);
 };
 const onFailed = () => {
 console.log("验证失败");
 };
 const onRefresh = () => {
 console.log("图片刷新成功")
 }
 return { onSuccess, onFailed, onRefresh };
 },
});
export default App;
</script>

效果

效果展示

TODO

  • npm
  • 测试

感谢

项目借鉴monoplasty

About

Vue3 + typescript 实现的滑块验证码

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /