Vue - 实现验证码输入组件

效果图

功能分解

输入效果
自动换焦
如何删除
接收paste事件

数据先行

确定验证码位数 amout
储存验证码的数组 code
当前输入项的索引 currentIndex

布局

<template><div class="ys-verification"><div class="input-wrapper" v-for="item in amount" :key="item"><input type="number"  @paste="handlePaste" title="code" v-focus="(item - 1) === currentIndex" maxlength="1" @input="handleInput($event,(item-1))" @keyup.delete="onDelete($event,(item-1))"  v-model="code[item-1]"></div></div>
</template>

初始化`code`

  created () {this.code = new Array(this.amount).fill('')},

如何实现自动换焦

A: 采用自定义指令实现
正如模板代码中展示的那样，为每一个input绑定了一个v-focus指令

  directives: {focus: {componentUpdated: function (el, obj) {obj.value && el.focus()}}},

我们传入一个boolean值控制当前项是否获得焦点。
而Boolean值是由 (item - 1) === currentIndex 决定，因此我们只需要修改currentIndex的值便可以实现自动换焦.

在哪里修改`currentIndex`

可以给Input绑定一个input事件，输入一位数字之后就让currentIndex + 1

 methods: {handleInput (e, index) {this.currentIndex = indexe.target.value = this.validateNumber(e.target.value)e.target.value !== '' && ++this.currentIndex!this.code.includes('') && this.$emit('onCompleted', this.code.join(''))},validateNumber (val) {return val.replace(/\D/g, '')},

怎么删除

我们监听键盘事件，使用vue的别名。删除之后退格。

@keyup.delete="onDelete($event,(item-1))"
//...
onDelete (e, index) {if (e.target.value === '') {this.currentIndex = index - 1 }},

粘贴

后来有了新需求，要求能够粘贴。
but,
我不能获取到Item的值，就很难受。
所以就没搞定，就简直粘贴了。
然而，有的手机还是能够粘贴

    handlePaste (e) {e.preventDefault()}

源码

<template><div class="ys-verification"><div class="input-wrapper" v-for="item in amount" :key="item"><input type="number"  @paste="handlePaste" title="code" v-focus="(item - 1) === currentIndex" maxlength="1" @input="handleInput($event,(item-1))" @keyup.delete="onDelete($event,(item-1))"  v-model="code[item-1]"></div></div>
</template><script>
export default {name: 'VerificationCodeInput',props: {amount: {type: Number,default: 4}},directives: {focus: {componentUpdated: function (el, obj) {obj.value && el.focus()}}},created () {this.code = new Array(this.amount).fill('')},methods: {handleInput (e, index) {this.currentIndex = indexe.target.value = this.validateNumber(e.target.value)e.target.value !== '' && ++this.currentIndex!this.code.includes('') && this.$emit('onCompleted', this.code.join(''))},onDelete (e, index) {if (e.target.value === '') {this.currentIndex = index - 1}},validateNumber (val) {return val.replace(/\D/g, '')},handlePaste (e) {e.preventDefault()}},data () {return {code: [],currentIndex: 0}}
}
</script><style lang="less" scoped>.ys-verification{width:100%;display: flex;justify-content: space-around;.input-wrapper{border-bottom: 1px solid #D6D6D6;width: 15%;height: 0;padding-bottom:20%;position: relative;input{position: absolute;width: 100%;height: 100%;text-align: center;transition: all 0.3s;font-size: 7vw;color: #333333;}}input:focus{border-bottom: 1px solid #666666;}}
</style>

Vue - 实现验证码输入组件相关推荐

基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览输入回调完成回调自定义验证码个数样式可控这里是可爱的Demo 支持支持 Vue.js 2.0+. 安装和使用 ...
vue实现验证码输入
需求:这种样式的验证码输入,进入页面时光标停留在第一个格子,随着输入的数字向后移动. 实现逻辑: ①首先考虑样式,将六个格子及获取光标的样式写出来. ②需要一个input框作为输入,所以在页面上加in ...
vue 实现动态增加输入框_vue实现一个6个输入框的验证码输入组件
要实现的功能: 完全和单输入框一样的操作,甚至可以插入覆盖: 1,限制输入数字 2,正常输入 3,backspace删除 4,paste任意位置粘贴输入 5,光标选中一个数字,滚轮可以微调数字大小,限 ...
vue 获取验证码倒计时组件
之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差.直接上代码. <template><div class="captcha-row" ...
Vue 表情包输入组件
Emotion 一个用于vue的表情输入组件 https://gitee.com/jiangliyue/vue_expression_input_module.git index是使用示例,emoti ...
基于 vue 的验证码组件
登录页面有个验证码,暂时没用到后台,在网上找了两个博客,记录一下. 一.直接写(参考-UIEngineer) 这个样式比较简单,直接在需要验证码的地方添加就行了.如果这个页面比较复杂,用组件会比较好. ...
如何封装一个vue组件（获取手机验证码的组件）
如何封装一个vue组件(获取手机验证码的组件) 定义一个名为 item-time 的新组件,这是获取手机验证码的组件 Vue.component('item-time', {props: ['maxt ...
Vue 表情输入组件，微信face表情组件
VUE表情包输入组件,先来张成品图看看. 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧. 注意: 1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址 ...
使用vue创建一个遮罩组件_用于输入遮罩的另一个Vue组件
使用vue创建一个遮罩组件语音输入蒙版 (vue-input-mask) Yet another Vue component for input masking. Based on react-in ...

Vue - 实现验证码输入组件

效果图

功能分解

数据先行

布局

初始化`code`

如何实现自动换焦

在哪里修改`currentIndex`

怎么删除

粘贴

源码

Vue - 实现验证码输入组件相关推荐

最新文章

热门文章

Vue - 实现验证码输入组件

效果图

功能分解

数据先行

布局

初始化code

如何实现自动换焦

在哪里修改currentIndex

怎么删除

粘贴

源码

Vue - 实现验证码输入组件相关推荐

最新文章

热门文章

初始化`code`

在哪里修改`currentIndex`