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让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
JQuery 学习技巧总结
May 21 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
hadoop常见错误以及处理方法详解
2013/06/19 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
Python-基础-入门 简介
2014/08/09 Python
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
python中dir函数用法分析
2015/04/17 Python
Python基本语法经典教程
2016/03/11 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
销售高级职员求职信
2013/10/29 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
人力资源部岗位职责
2015/02/11 职场文书
如何正确理解python装饰器
2021/06/15 Python
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android