Vue插件之滑动验证码


Posted in Javascript onSeptember 21, 2019

本文实例为大家分享了Vue插件之滑动验证码的具体代码,供大家参考,具体内容如下

预览

目前仅前端实现,支持移动端滑动事件。版本V1.0.5

Vue插件之滑动验证码

github文档地址

安装

npm install --save vue-monoplasty-slide-verify

使用方法:

// main.js
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);
// template
<slide-verify :l="42"
  :r="10"
  :w="310"
  :h="155"
  @success="onSuccess"
  @fail="onFail"
  @refresh="onRefresh"
  :slider-text="text"
  ></slide-verify>
<div>{{msg}}</div>
// script
export default {
 name: 'App',
 data(){
 return {
  msg: '',
  text: '向右滑',
 }
 },
 methods: {
 onSuccess(){
  this.msg = 'login success'
 },
 onFail(){
  this.msg = ''
 },
 onRefresh(){
  this.msg = ''
 }
 }
}

参数说明:

props传参(均为可选)

Vue插件之滑动验证码

自定义回调函数:

Vue插件之滑动验证码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
js编写选项卡效果
May 23 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 #Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 #Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 #Javascript
layui table 表格模板按钮的实例代码
Sep 21 #Javascript
js实现图片3D轮播效果
Sep 21 #Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 #Javascript
原生js实现3D轮播图
Mar 21 #Javascript
You might like
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php简单复制文件的方法
2016/05/09 PHP
php文件上传类完整实例
2016/05/14 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
用python制作游戏外挂
2018/01/04 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
护士毕业生自荐信
2014/02/07 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
关于保护环境的建议书
2014/05/13 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
800字作文之大雪
2019/12/04 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
Python中文纠错的简单实现
2021/07/07 Python
使用python绘制分组对比柱状图
2022/04/21 Python