169 lines
3.0 KiB
Vue
169 lines
3.0 KiB
Vue
<!--
|
||
自定义验证码输入、密码输入使用
|
||
|
||
使用方法：
|
||
maxlength：输入最大长度
|
||
isPwd：是否是密码模式
|
||
@finish：回调函数
|
||
<validcode :maxlength="4" :isPwd="false" @finish="finish"></validcode>
|
||
-->
|
||
<template>
|
||
<view class="code-area">
|
||
<view class="flex-box">
|
||
<input :value="val" type="number" :focus="true" :maxlength="maxlength" class="hide-input" @input="getVal" @focus="focus"
|
||
@blur="blur" />
|
||
<view :key="index" v-for="(i,index) in maxlength - 1" v-bind:class="['item', { active: focusing && codeIndex === index }]">
|
||
<view class="line"></view>
|
||
<block v-if="val.length - 1 < index"></block>
|
||
<block v-else-if="isPwd">
|
||
<text class="dot">.</text>
|
||
</block>
|
||
<block v-else> {{ val[index] }}</block>
|
||
</view>
|
||
<view v-bind:class="['item', { active: focusing && codeIndex >= maxlength - 1 }]">
|
||
<view class="line" v-if="val.length - 1 < maxlength - 1"></view>
|
||
<block v-else-if="isPwd">
|
||
<text class="dot">.</text>
|
||
</block>
|
||
<block v-else> {{ val[maxlength - 1] }}</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
//最大长度 值为4或者6
|
||
maxlength: {
|
||
type: Number,
|
||
default: 4
|
||
},
|
||
//是否是密码
|
||
isPwd: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
focusing: true,
|
||
val: '', //输入框的值
|
||
};
|
||
},
|
||
methods: {
|
||
//取值
|
||
getVal(e) {
|
||
let {
|
||
value
|
||
} = e.detail;
|
||
if (value.length <= this.maxlength) {
|
||
this.val = value;
|
||
}
|
||
},
|
||
//清除验证码或者密码
|
||
clear() {
|
||
this.val = "";
|
||
},
|
||
blur() {
|
||
this.focusing = false
|
||
},
|
||
focus() {
|
||
this.focusing = true
|
||
}
|
||
},
|
||
computed: {
|
||
codeIndex() {
|
||
return this.val.length
|
||
}
|
||
},
|
||
watch: {
|
||
val(val) {
|
||
if (val.length === this.maxlength) {
|
||
this.$emit('finish', val);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.code-area {
|
||
text-align: center;
|
||
|
||
.flex-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.item {
|
||
position: relative;
|
||
width: 80upx;
|
||
height: 80upx;
|
||
margin-right: 18upx;
|
||
font-size: 30upx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 80upx;
|
||
box-sizing: border-box;
|
||
border: 2upx solid #cccccc;
|
||
}
|
||
|
||
.item:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.active {
|
||
border-color: #1B66FF
|
||
}
|
||
|
||
.active .line {
|
||
display: block;
|
||
}
|
||
|
||
.line {
|
||
display: none;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 2upx;
|
||
height: 40upx;
|
||
background: #1B66FF;
|
||
animation: twinkling 1s infinite ease;
|
||
}
|
||
|
||
.hide-input {
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 200%;
|
||
height: 100%;
|
||
text-align: left;
|
||
z-index: 9;
|
||
opacity: 1;
|
||
}
|
||
|
||
@keyframes twinkling {
|
||
0% {
|
||
opacity: 0.2;
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
|
||
.dot {
|
||
font-size: 80upx;
|
||
line-height: 40upx;
|
||
}
|
||
}
|
||
</style>
|