基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code
基于Vue2.0的移动端验证码输入组件.
功能预览
- 输入回调
- 完成回调
- 自定义验证码个数
- 样式可控
这里是可爱的Demo
支持
支持 Vue.js 2.0+.
安装和使用
npm install vue-input-code --save
- 作为全局组件使用
//在项目入口文件
import Vue from 'vue'
import VueInputCode from 'vue-input-code'
Vue.component('VueInputCode', VueInputCode)
- 作为局部组件
//在某个组件中
import VueInputCode from 'vue-input-code'
export default {components: {VueInputCode}
}
HTML中使用:
<vue-input-code span-size="20px" type="number" :number="5" height="50px" span-color="#f35252" input-color="#3498db" input-size="24px" :code="code" :getinput="getInput" :success="success"></vue-input-code>
API
Props
参数 | 类型 | 说明 | 可选值 | 默认值 |
---|---|---|---|---|
code | 数组 | 用户输入的验证码数组 | — | — |
type | 字符串 | 用户输入类型 | number,text | number |
getinput | 函数 | 用户每次输入后的回调函数,接受一个验证码字符串 | — | — |
success | 函数 | 用户输入完成后的回调函数,接受一个验证码字符串 | — | — |
span-size | 字符串 | 输入后的字体显示大小 | — | 20px |
span-color | 字符串 | 输入后的字体显示颜色 | — | #f35252 |
input-size | 字符串 | 输入框的字体显示大小 | — | 20px |
input-color | 字符串 | 输入框的字体显示颜色 | — | #000 |
number | 数字 | 验证码个数 | — | 6 |
height | 字符串 | 整个框的显示高度 | — | 60px |
http://www.tuicool.com/articles/Z7byuq
https://github.com/zhouyuexie/vue-input-codeB
基于 Vue2.0 的移动端 / PC 端验证码输入组件.相关推荐
- vue2.0 使用 swiper 实现PC端卡片左右虚拟slides滑动
1.实现效果 2.下载swiper (我装的是4.5.1版本) 中文官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 3.官网案例 <div class="swiper ...
- 基于vue2.0+ 抽奖项目
前言 临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码 简介 基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
- vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
- 多终端登录,只保留一个移动端+PC端同时在线
大家好,我是入错行的bug猫.(http://blog.csdn.net/qq_41399429,谢绝转载) 今天突然有小伙伴在群里问bug猫,多终端登录怎么搞. bug猫说,不知道百度的程序猿不是好 ...
- 基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
- 基于vue2.0 + elementUI 后台管理平台
Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
最新文章
- python语言简介-Python语言介绍
- 使用OpenCV进行身份证号码字符进行分割
- Python-OpenCV--直线提取
- javaweb利用servlet与struts2实现可点击刷新的基础图片验证码
- telnet ip 端口
- #题目:GCD XOR UVA - 12716
- 怎样在php中制作电子相册,电子相册制作 如何制作电子相册带音乐和文字
- Libero Soc v11.9的安装以及证书的获取(2021新版)
- WIN7 通知栏处喇叭上有个小红叉,提示未插入“未插入扬声器或耳机”的解决方法
- 局部(x,y)坐标 转 WGS84经纬度坐标
- 编码至高法则-高内聚低耦合
- 工业场景知识图谱落地实战
- 轻量级网络综述 — 主干网络篇
- Android 的 Fragment 教程
- 《学习总章》硬件工程师学习首页
- 第一章 初识EmguCV
- codeforces1064E Dwarves, Hats and Extrasensory Abilities
- Vue中router-view和子路由的使用方法
- 6.22(js-->案例应用)
- 抖音怎么注销账号?操作流程步骤有哪些?
热门文章
- 3D模型免费下载网站 https://3d.idorobot.com/
- 服务器磁盘阵列亮红灯报警故障处理
- 无法启动parallels 缺少必要组件_游戏软件无法运行?打包运行库送给你
- 泛微 DML语句 存储过程
- 2K屏+144Hz高速刷新,神器级电竞游戏显示器装备
- Unity3D初级案例-经典贪吃蛇二
- 贾跃亭旗下FF年亏5.2亿美元:恒大持股20.5% 退市危机解除
- Java蓝桥杯 谈判
- 使用自己的域名解析cnblogs博客(CSDN也可以)
- “ERR_NAME_NOT_RESOLVED”:如何在 Google Chrome 浏览器中修复此 DNS 错误