vue滑动图片验证登录

最新推荐文章于 2025-04-24 16:46:48 发布

原创

最新推荐文章于 2025-04-24 16:46:48 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中实现滑动图片验证功能。通过安装vue-monplasty-slide-verify库，然后引入并使用组件<slide-verify>，设置相关参数如长度、位置和回调函数，可以轻松集成滑动验证到登录过程。

预览

在这里插入图片描述
使用步骤：
1.安装 npm install --save vue-monplasty-slide-verify
2.使用方法：
import SlideVerify from “vue-monplasty-slide-verify”
Vue.use（SlideVerify）;
<slide-verify :l=“42”
:r=“10”
:w=“310”
:h=“155”
:slider-text=“text”
@success=“onSuccess”
@fail=“onFail”
@refresh=“onRefresh”

{ {msg}}

export default { name: "App", data(){ return { msg: "", text: "向右滑" } }， methods：{ onSuccess（）{ this.msg="login success" }， onFail（）{ this.msg="" }, onRefresh（）{ this.msg="" } } } 参数说明 props传参（均为可选） ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191010135805817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jzc19vYmplY3Q=,size_16,color_FFFFFF,t_70) 自定义回调函数 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191010135856964.png?x-oss-process=image/watermar