在日常项目中我们实现登录的时候，会进行人为操作验证，这里使用滑块验证，常见的验证方式

我们借助插件 vue3-slide-verify

安装

npm install --save vue3-slide-verify

使用

在页面创建组件verification.vue  名字随意写入下面代码

<template><div class="silde_box"><slide-verify class="silde_box" ref="block" slider-text="向右滑动->" :accuracy="1" @again="onAgain" @success="onSuccess"@fail="onFail" @refresh="onRefresh" :imgs="img"></slide-verify><button class="btn" @click="handleClick">在父组件可以点我刷新哦</button><div>{{ msg }}</div></div>
</template><script lang="ts" setup>
import { ref } from "vue";
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify"; //引入滑动验证组件
import "vue3-slide-verify/dist/style.css"; //引入滑动验证组件样式const msg = ref("");
//自定义图片
const img = ref(["https://img0.baidu.com/it/u=1552632757,378376738&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281", "https://img2.baidu.com/it/u=4260616497,4153321689&fm=253&fmt=auto&app=138&f=JPEG?w=656&h=435"])
const block = ref<SlideVerifyInstance>();const onAgain = () => {msg.value = "检测到非人为操作的哦！ try again";// 刷新block.value?.refresh();
};
//成功的回调
const onSuccess = (times: number) => {msg.value =  "验证通过，耗时" + (times / 1000).toFixed(1) + "秒";;
};
//失败的回调
const onFail = () => {msg.value = "验证不通过";
};
//点击刷新回调
const onRefresh = () => {msg.value = "点击了刷新小图标";
};const handleClick = () => {// 刷新block.value?.refresh();msg.value = "";
};
</script>
<style scoped>
.silde_box {margin: 0 auto;
}
</style>

在需要用到的页面进行引入使用

<template><div><Vverify></Vverify></div>
</template><script setup lang="ts">
import { ref, watchEffect } from 'vue'
import  Vverify from "./verification.vue"; //引入组件
</script><style lang="scss" scoped>
</style>

以上操作就可以实验滑块验证 

加遮罩 根据需求添加

在项目中我们使用滑块验证一般禁止进行其他操作，所有我们需要添加遮罩

<template><div><!-- 遮罩层 --><div class="mask"><!-- 用来放置验证模块 --><div class="verification"> <Vverify></Vverify></div></div></div>
</template><script setup lang="ts">
import  Vverify from "./verification.vue";</script><style lang="scss" scoped>
//遮罩层的css设置
.mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: 999999;background: rgba(0, 0, 0, 0.5);
}
//用来放置验证模块css
.verification {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;
}
</style>