vue 注册登录验证码 两种实现方式
1,一个input实现无法获取焦点
2.四个input实现 可以获取焦点
一个input实现
<div :class="['code-item', codeError!==''? 'errormsg':'' ]">
<span v-for="(item,index) in codeList" :key="index">{
{ form.code[index]||'' }}</span>
<el-input v-model="form.code" autocomplete="off" class="input-code" placeholder="" />
</div>
下面展示一些 内联代码片
。
```javascript
codeList: [1, 2, 3, 4],
.code-item{
width: 220px;
display: flex;
flex-direction: row;
justify-content: space-around;
position: relative;
&.errormsg{
span{
border: 1px solid #F10353;
}
}
span{
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
padding-bottom: 0;
border: 1px solid #C7C7C7;
text-align: center;
color: #025157;
font-size: 18px;
font-weight: bold;
}
::v-deep .input-code{
input{
color: transparent;
background-color: transparent;
}
position: absolute;
border: none;
outline: none;
color: transparent;
background-color: transparent;
text-shadow: 0 0 0 transparent;
height: 44px;
width: 100%;
-webkit-appearance: none !important;
margin: 0;
}
}
四个input 实现:
单独封装的验证码组件
下面展示一些 内联代码片
。
<template>
<div>
<div :class="['verifyCode',error!==''?'errmsg':'']">
<input
v-for="p in inputNums"
:key="p"
ref="input"
:value="code[p-1]"
type="text"
@input="inputFun($event,p)"
@keydown.delete="e=>{deleteCode(e.target.value,p)}"
>
</div>
</div>
</template>
<script>
export default {
name: 'Verifycode',
components: {
},
props: {
inputNums: {
type: Array,
default: (