Vue3使用拼图验证码校验 1、在Vue3中使用图片拼图验证码npm i vue3-slide-verify（详见）2、代码中使用（未封装，有需要可以封装）<div> <slide-verify ref="block" slider-text="向右滑动->" :accuracy="1" @again="onAgain" @success="onSuccess" @fail="onFail" @refresh="onRefresh"></slide-verify> <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button> <div>{{ msg }}</div> </div> <script> import { toRefs, reactive, ref } from 'vue' // 局部注册组件，需要单独引用组件样式 // 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小 import SlideVerify from "vue3-slide-verify"; import "vue3-slide-verify/dist/style.css"; export default { components: { SlideVerify }, setup(props, { emit }) { const msg = ref(""); const block = ref(); // 传参 const state = reactive({ }) const onAgain = () => { msg.value = "检测到非人为操作的哦！ try again"; // 刷新 block.value?.refresh(); } const onSuccess = (times) => { 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, onAgain, onSuccess, onFail, onRefresh, handleClick, } } } </script>3、其他备注argumentParamTypeDescribeVersionlNumberblock length rNumberblock circle radius wNumbercanvas width hNumbercanvas height sliderTextStringSlide filled right imgsArraypicture array 背景图数组，默认值 [] accuracyNumber滑动验证的误差范围，默认值 5 showBoolean是否显示刷新按钮，默认值 true callBackEventTypeDescribeVersionsuccessFunctionsuccess callback返回时间参数，单位为毫秒failFunctionfail callback refreshFunction点击刷新按钮后的回调函数 againFunction检测到非人为操作滑动时触发的回调函数