146 lines
2.6 KiB
Vue
146 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<view class="uni-flex uni-flex-center vcode-input-body">
|
||
|
|
<text class="vcode-input-item"
|
||
|
|
:class="isBorderLine?'vcode-input-line':'vcode-input-border'"
|
||
|
|
v-for="(v,index) in sum"
|
||
|
|
:key="index"
|
||
|
|
@tap="setFocus"
|
||
|
|
:style="getStyle(index)">
|
||
|
|
{{ text[index]?text[index]:'' }}
|
||
|
|
</text>
|
||
|
|
<input
|
||
|
|
ref="VcodeInput"
|
||
|
|
type="number"
|
||
|
|
class="hidden-input"
|
||
|
|
:focus="focus"
|
||
|
|
:maxlength="sum"
|
||
|
|
@input="inputVal"
|
||
|
|
@blur="setBlur"
|
||
|
|
:password="isPassword"
|
||
|
|
placeholder="验证码"/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'VcodeInput',
|
||
|
|
props: {
|
||
|
|
sum:{
|
||
|
|
type: Number,
|
||
|
|
default: 6
|
||
|
|
},
|
||
|
|
isBorderLine:{
|
||
|
|
type:Boolean,
|
||
|
|
default:false
|
||
|
|
},
|
||
|
|
borderColor:{
|
||
|
|
type:String,
|
||
|
|
default:'#DADADA'
|
||
|
|
},
|
||
|
|
borderValueColor:{
|
||
|
|
type:String,
|
||
|
|
default:'#424456'
|
||
|
|
},
|
||
|
|
borderActiveColor:{
|
||
|
|
type:String,
|
||
|
|
default:'#FF6B00'
|
||
|
|
},
|
||
|
|
isAutoComplete:{
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
isPassword:{
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
focus:false,
|
||
|
|
text:[]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
setTimeout(()=>{
|
||
|
|
this.focus=true;
|
||
|
|
},300)
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
getStyle(index){
|
||
|
|
let style={};
|
||
|
|
style.borderColor=this.borderColor;
|
||
|
|
if(this.text.length>index){
|
||
|
|
style.borderColor=this.borderValueColor;
|
||
|
|
style.color=this.borderValueColor;
|
||
|
|
}
|
||
|
|
if(this.text.length===index){
|
||
|
|
style.borderColor=this.borderActiveColor;
|
||
|
|
}
|
||
|
|
return style;
|
||
|
|
},
|
||
|
|
setBlur(){
|
||
|
|
this.focus=false;
|
||
|
|
},
|
||
|
|
setFocus(){
|
||
|
|
this.focus=true;
|
||
|
|
},
|
||
|
|
inputVal(e) {
|
||
|
|
let value=e.detail.value;
|
||
|
|
if(this.isAutoComplete){
|
||
|
|
if(value.length>=this.sum){
|
||
|
|
this.focus=false;
|
||
|
|
this.$emit('vcodeInput', value);
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
this.$emit('vcodeInput', value);
|
||
|
|
}
|
||
|
|
if(this.isPassword){
|
||
|
|
let val='';
|
||
|
|
for (let i = 0; i < value.length; i++) {
|
||
|
|
val+='●';
|
||
|
|
}
|
||
|
|
this.text=val;
|
||
|
|
}else{
|
||
|
|
this.text=value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.vcode-input-body{
|
||
|
|
margin-left: -36rpx;
|
||
|
|
margin-right: -36rpx;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
.vcode-input-item{
|
||
|
|
width: 76rpx;
|
||
|
|
height: 76rpx;
|
||
|
|
margin-left: 12rpx;
|
||
|
|
margin-right: 12rpx;
|
||
|
|
line-height: 76rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.vcode-input-border{
|
||
|
|
border-style: solid;
|
||
|
|
border-width: 2rpx;
|
||
|
|
border-color: $uni-border-color;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
}
|
||
|
|
.vcode-input-line{
|
||
|
|
border-bottom-style: solid;
|
||
|
|
border-bottom-width: 2rpx;
|
||
|
|
border-color: $uni-border-color;
|
||
|
|
}
|
||
|
|
.hidden-input{
|
||
|
|
width: 1px;
|
||
|
|
height: 1px;
|
||
|
|
position: absolute;
|
||
|
|
left: -1px;
|
||
|
|
top: -1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|