vue3中使用 vue3-slide-verify 滑块验证登录

前端小趴菜05

已于 2024-01-25 18:46:15 修改

阅读量2.8k

点赞数 11

文章标签：前端 vue.js

于 2024-01-25 18:30:16 首次发布

本文链接：https://blog.csdn.net/m0_68716504/article/details/135851023

版权

本文介绍了如何在Vue3项目中使用vue3-slide-verify插件实现滑块验证功能，包括组件安装、使用示例以及配合遮罩层防止非人为操作的实践。

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

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

我们借助插件 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 SlideV