<template>
|
<view class="tn-verification-code-class tn-verification-code">
|
<view class="tn-code__container">
|
<input class="tn-code__input" :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxLength" @input="getValue" />
|
<view v-for="(item, index) in loopCharArr" :key="index">
|
<view
|
class="tn-code__item"
|
:class="[{
|
'tn-code__item--breathe': breathe && charArrLength === index,
|
'tn-code__item__box': mode === 'box',
|
'tn-code__item__box--active': mode === 'box' && charArrLength === index
|
}]"
|
:style="[itemStyle(index)]"
|
>
|
<view
|
v-if="mode !== 'middleLine'"
|
class="tn-code__item__line tn-code__item__line--placeholder"
|
:style="[placeholderLineStyle(index)]"
|
></view>
|
<view
|
v-if="mode === 'middleLine' && charArrLength <= index"
|
class="tn-code__item__line tn-code__item__line--middle"
|
:class="[{
|
'tn-code__item__line--bold': bold,
|
'tn-code__item--breathe': breathe && charArrLength === index,
|
'tn-code__item__line--active': charArrLength === index
|
}]"
|
:style="[lineStyle(index)]"
|
></view>
|
<view
|
v-if="mode === 'bottomLine'"
|
class="tn-code__item__line tn-code__item__line--bottom"
|
:class="[{
|
'tn-code__item__line--bold': bold,
|
'tn-code__item--breathe': breathe && charArrLength === index,
|
'tn-code__item__line--active': charArrLength === index
|
}]"
|
:style="[lineStyle(index)]"
|
></view>
|
<block v-if="!dotFill">
|
<text>{{ charArr[index] ? charArr[index] : '' }}</text>
|
</block>
|
<block v-else>
|
<text class="tn-code__item__dot">{{ charArr[index] ? '●' : '' }}</text>
|
</block>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'tn-verification-code',
|
props: {
|
// 验证码的值
|
value: {
|
type: [String, Number],
|
default: ''
|
},
|
// 最大输入长度
|
maxLength: {
|
type: Number,
|
default: 4
|
},
|
// 显示模式
|
// box -> 盒子 bottomLine -> 底部横线 middleLine -> 中间横线
|
mode: {
|
type: String,
|
default: 'box'
|
},
|
// 用圆点填充空白位置
|
dotFill: {
|
type: Boolean,
|
default: false
|
},
|
// 字体加粗
|
bold: {
|
type: Boolean,
|
default: false
|
},
|
// 字体大小
|
fontSize: {
|
type: [String, Number],
|
default: ''
|
},
|
// 激活时颜色
|
activeColor: {
|
type: String,
|
default: ''
|
},
|
// 未激活时颜色
|
inactiveColor: {
|
type: String,
|
default: ''
|
},
|
// 输入框宽度，单位rpx
|
inputWidth: {
|
type: Number,
|
default: 80
|
},
|
// 当前激活的item带呼吸效果
|
breathe: {
|
type: Boolean,
|
default: true
|
},
|
// 自动获取焦点
|
focus: {
|
type: Boolean,
|
default: false
|
},
|
// 隐藏原生键盘，当使用自定义键盘的时候设置该参数未true即可
|
disabledKeyboard: {
|
type: Boolean,
|
default: false
|
}
|
},
|
computed: {
|
// 拆分要显示的字符
|
charArr() {
|
return this.valueModel.split('')
|
},
|
// 当前输入字符的长度
|
charArrLength() {
|
return this.charArr.length
|
},
|
// 输入框的个数
|
loopCharArr() {
|
return new Array(this.maxLength)
|
},
|
itemStyle() {
|
return (index) => {
|
let style = {}
|
style.fontWeight = this.bold ? 'bold' : 'normal'
|
if (this.fontSize) {
|
style.fontSize = this.fontSize + 'rpx'
|
}
|
if (this.inputWidth) {
|
style.width = this.inputWidth + 'rpx'
|
style.height = this.inputWidth + 'rpx'
|
style.lineHeight = this.inputWidth + 'rpx'
|
}
|
if (this.inactiveColor) {
|
style.color = this.inactiveColor
|
style.borderColor = this.inactiveColor
|
}
|
if (this.mode === 'box' && this.charArrLength === index) {
|
style.borderColor = this.activeColor
|
}
|
return style
|
}
|
},
|
placeholderLineStyle() {
|
return (index) => {
|
let style = {}
|
style.display = this.charArrLength === index ? 'block' : 'none'
|
if (this.inputWidth) {
|
style.height = (this.inputWidth * 0.5) + 'rpx'
|
}
|
return style
|
}
|
},
|
lineStyle() {
|
return (index) => {
|
let style = {}
|
if (this.inactiveColor) {
|
style.backgroundColor = this.inactiveColor
|
}
|
if (this.charArrLength === index && this.activeColor) {
|
style.backgroundColor = this.activeColor
|
}
|
return style
|
}
|
}
|
},
|
watch: {
|
value: {
|
handler(val) {
|
// 转换为字符串
|
val = String(val)
|
// 截掉超出的部分
|
this.valueModel = val.substring(0, this.maxLength)
|
},
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
valueModel: ''
|
}
|
},
|
methods: {
|
// 获取填写的值
|
getValue(e) {
|
const {
|
value
|
} = e.detail
|
this.valueModel = value
|
// 判断输入的长度是否超出了maxlength的值
|
if (String(value).length > this.maxLength) return
|
// 未达到maxlength之前，触发change事件，否则触发finish事件
|
this.$emit('change', value)
|
this.$emit('input', value)
|
if (String(value).length == this.maxLength) {
|
this.$emit('finish', value)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.tn-verification-code {
|
text-align: center;
|
|
.tn-code {
|
&__container {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
flex-wrap: wrap;
|
position: relative;
|
}
|
|
&__input {
|
position: absolute;
|
top: 0;
|
left: -100%;
|
width: 200%;
|
height: 100%;
|
text-align: left;
|
z-index: 9;
|
opacity: 0;
|
background: none;
|
}
|
|
&__item {
|
position: relative;
|
width: 80rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
margin: 10rpx 10rpx;
|
font-size: 60rpx;
|
font-weight: bold;
|
color: #838383;
|
|
&--breathe {
|
animation: breathe 2s infinite ease;
|
}
|
|
&__box {
|
border: 2rpx solid #AAAAAA;
|
border-radius: 6rpx;
|
|
&--active {
|
animation-timing-function: ease-in-out;
|
animation-duration: 1500ms;
|
animation-iteration-count: infinite;
|
animation-direction: alternate;
|
overflow: hidden;
|
border: 2rpx solid #01BEFF;
|
}
|
}
|
|
&__line {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #AAAAAA;
|
|
&--bold {
|
height: 4px !important;
|
}
|
|
&--placeholder {
|
display: none;
|
width: 2rpx;
|
height: 40rpx;
|
}
|
|
&--middle, &--bottom {
|
width: 80%;
|
height: 2px;
|
border-radius: 2px;
|
}
|
&--bottom {
|
top: auto !important;
|
bottom: 0;
|
transform: translateX(-50%) !important;
|
}
|
|
&--active {
|
background-color: #01BEFF !important;
|
}
|
}
|
|
&__dot {
|
font-size: 34rpx;
|
line-height: 34rpx;
|
}
|
}
|
}
|
}
|
|
@keyframes breathe {
|
0% {
|
opacity: 0.3;
|
}
|
|
50% {
|
opacity: 1;
|
}
|
|
100% {
|
opacity: 0.3;
|
}
|
}
|
</style>
|
